a presentation on extjs

8/2/2019 A Presentation on ExtJS

http://slidepdf.com/reader/full/a-presentation-on-extjs 1/28

Power Of ExtJs By Kartikeya Madeshia



What is ExtJs

● ExtJS is a javascript framework (client-side)that enables developers to develop RichInternet Application (RIA) (static websites or

data-driven applications) with a plethora of options.

● ExtJS has a huge collection of controls (rangingfrom 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 changedsimply to Ext, a reflection of its maturity andindependence as a framework.

● A company was formed in early 2007, and Extis now dual-licensed under the GPL v3 and aproprietary 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 – supportdragging/resizing/closing



Good Documentation



How do we begin?

● Download the latest copy of ExtJS fromhttp://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 (sincecertain examples work only if accessed via

website / virtual directory).



Walking the first step…

● Add the ExtJS folder (ext-3.4.0) within theproject folder.



Files to be linked

● Add links to all thehighlighted files. Thesefiles are very muchimportant to set-up theground 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 engineof Ext. This file is very important & cannotbe skipped.

● ext-all.js: This file contains all the definedUI elements (like textbox, combo, button,grid etc…).

● ext-all.css: Responsible for the defaultblue 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 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

• StoresLocal 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..

a presentation on extjs

Documents