ExtjsPart1

(An overview of the ExtJSJavaScript Framework)

2© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL

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 ?

• This is really what matters (MVC)o Easy Client-side data modeling

Relational Modelso Simple to use GUI widgets

Client Side JS With ExtJS

• MVC for JavaScript• Exactly same process for server side stack, except we now try to use the server as little as possible

o This allows for powerful client machines to do most of our processing and renderingo Only allow the client to manipulate data that can be considered hostile!


Cross Browser


ExtJS View

• Since this is JavaScript, we immediately expect robust GUI widgets

• Of course, you can add CSS and style them


ExtJS Control

• This allows for very JavaScript is a functional language• strong and very easy control logic


Good Documentation


Data Grid•Sort

•Columns

•Editable

•Data source

•Filter


Charts


Calendars


Example Of Creating Tabs


What Else Extjs Can Do?

• Ajax support• Dom traversing• Dom manipulation• Event Handling• Selectors• OOP emulation• Animation


Component

• All widgets extends component class• Provide base widget functions like

o enable()/disable()o show()/hide()o addClass()/removeClass()o update(data/html) – update content areao getEl() return elemento getId()o getXType()o render(target)o focus()

• XType – alternate way to define componento Lazy component creation

• var panel1 = {• xtype : 'panel',• title : 'Plain Panel',• html : 'Panel with an xtype specified'• }• var myPanel = new Ext.Panel({ • renderTo : document.body, • height : 50, • width : 150, • title : 'Panel', • frame : true

• Components are managed by Ext.ComponentMgro get(componentId)o registerType(xtype, object) (shorthand Ext.reg())


Container

• Handle the basic behavior of containing items, namely adding, inserting and removing items

• Main functionso add()o remove()/removeAll()o insert()o find()/findBy()/findById()/findByTypeo doLayout()o get(index or id)/getComponent(component or index or id)

• Main propo Items - MixedCollection of children components


Panels

• Main panel functions/prop/conf propo load()o body – propo html – conf propo autoLoad – conf prop

• Toolbar and Bottombar• Panel subclasses

o TabPanelo Window o FormPanelo GridPanel o TreePanel


Layout

• Layouts manages by containers – there is no need to create Layouts directly

• The most useful are Fit, VBox, HBox, Bordero Only VBox, HBox, Border layouts supports margins

• Flex prop of VBox, HBox• BorderLayout must have center item• Table layout does not support resizing of items


What We Did?







REFERENCES AND LINKS:

• Main Websitehttp://www.sencha.com/

• EXT JS Downloadhttp://www.sencha.com/products/extjs/download/

• EXT JS API Documentation http://dev.sencha.com/deploy/dev/docs/

• EXT JS Sampleshttp://dev.sencha.com/deploy/dev/examples/


Thank You!

Technology

ExtjsPart1