Power Of ExtJs By Kartikeya Madeshia

What is ExtJs● ExtJS is a javascript framework (client-side)

that enables developers to develop Rich Internet Application (RIA) (static websites or data-driven applications) with a plethora of options.

● ExtJS has a huge collection of controls (ranging from textboxes to highly sophisticated UI Controls).

ExtJs History ● Started as extension to Yahoo's YUI!

Framework in 2006 – YUI-Ext !● By the end of the year, the library had gained so

much in popularity that the name was changed simply to Ext, a reflection of its maturity and independence as a framework.

● A company was formed in early 2007, and Ext is now dual-licensed under the GPL v3 and a proprietary license.

Why ExtJs ?

● Most Developers don't like to design● HTML isn’t pretty● HTML isn’t functional● ExtJs is the largest consistent library of

extended components in a single package● ExtJs is “baked in” to ColdFusion

Features of ExtJs

● Ext is cross-browser compatible.● Ext has a complete set of widgets.● Ext looks great and it feels good.● Ext is very well documented.● Ext can be used both under a free and a

commercial license.

Cross Browser

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

Good Documentation

How do we begin?● Download the latest copy of ExtJS from

http://www.sencha.com/products/extjs/download/● Unzip using any file compression utility

(Winzip / WinRAR).● It is strongly recommended that you create a

virtual directory for the unzipped folder (since certain examples work only if accessed via website / virtual directory).

Walking the first step…● Add the ExtJS folder

(ext-3.4.0) within the project folder.

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.

● Next add your custom files.● Example (in index.cfm): ● <link rel="stylesheet" type="text/css" href="ext-

3.4.0/resources/css/ext-all.css" />

● <script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>

● <script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>

● <script type="text/javascript" src="js/global.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…).

● ext-all.css: Responsible for the default blue theme of ExtJS.

What Do We Know?• Data In Most applications require some form of data entry

• Data Out Most applications require us to display that data in an easy and logical format

Data In• Create rich dynamic form interfaces for taking in data.• Apply client-side validation process and logic.

Data Out● Rich component architecture● Tools to create new and inventive

displays

Layout Controls● Layouts● Tabs● Accordians● Windows● Panels● Message Boxes● Templates

Sample Layouts

Sample Containers● Most all common paradigms

Windows, Panels, Tabs, Accordion

Message Boxes

Data Views

• Grids – Basic

– Editable

– Property

– Paging

– Grouping

• Forms• Charts• Trees

Sample Grid● Feature rich grid class

- Sorting- Column hiding- In-cell editing- Customer rendering / formatting- Plug-ins (grouping, summaries, expands)

Sample Grid (cont..)

Sample forms● Rich forms support

-Excellent validation support

Data

• Readers– Local or Remote Data

• JavaScript Array

• JSON

• XML

• Writers (to server) – JSON

– XML

• Stores Local storage of records, with built in facility for client-side manipulation and

server-side communication

Pizzazz● Ajax● Effects● Drag & Drop● History● Utilities

Thank You..

Questions..