Introduction to ExtJS Framework

By Alok Agrawal

Introduction to ExtJS
ExtJS is a java-script framework (client-side) that enables developers to develop Rich Internet Applications (RIA) (static websites or data-driven applications) with a large number of options. ExtJS has a huge collection of controls (ranging from textboxes to highly sophisticated UI Controls) along with a brilliant demo + examples.

Points to Remember

Since ExtJS is a java-script framework, all of the java script rules are applicable for ExtJS. ExtJS makes excellent & extensive use on DOM, CSS etc. ExtJS is case-sensitive, i.e., a != A ExtJS is Asynchronous by default.

WHY EXT JS ?

EXT Windows looks like OS windows support dragging/resizing/closing

Good Documentation

EXT JS SAMPLES

Community Support

Cross Browser

Adapters

Commercial and Open Source License

WIDGETS PROVIDED BY EXTJS

WINDOW

Combobox

Data grid
sort columns editable data source

CHART

CALENDAR

Getting Started

Download: http://sencha.com/products/extjs /download.php 1) Create a Web Project. 2) Paste all mandatory extjs related files in a separate folder or resource folder , name it extjs folder or whatever.

Files to be linked
Add links to all the highlighted files. These files are very much important to set-up the ground work for our application. Example: <link href="ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript" src="ExtJS/adapter/ext/ext-base.js"></script> <script type="text/javascript" language="javascript" src="ExtJS/extall.js"></script>

Explaining the files to be linked

ext-base.js: This file is the driving engine of Ext. This file is very important & cannot be skipped. ext-all.js: This file contains all the defined UI elements (like textbox, combo, button, grid etc) found in the samples & demo link (except ux type controls). Using this file is highly recommended for beginners. Advanced professionals can replace this with a custom build file. ext-all.css: Responsible for the default blue theme of ExtJS.

EXAMPLE OF HELLO WORLD ALERT WINDOW

Hello World

RESULT

EXAMPLE OF CREATING TABS

HTML CODE

JS CODE

RESULT:

REFERENCES AND LINKS: Main Website http://www.sencha.com/ Learning EXT JS http://www.sencha.com/learn/Ext_Getting_Started EXT JS Download http://www.sencha.com/products/extjs/download/ EXT JS API Documentation http://dev.sencha.com/deploy/dev/docs/ EXT JS Samples http://dev.sencha.com/deploy/dev/examples/

THANK YOU