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 Unzip using any file compression utility (Winzip / WinRAR).

http://www.sencha.com/products/extjs/download/

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="ext3.4.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext3.4.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.4.0/extall.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..

Sign up to vote on this title
UsefulNot useful