You are on page 1of 27

Extjs Overview

All Materials Copyright Magenta Corporation Ltd.

Page 1

Why we use Extjs?

We have several projects in Magenta which have already used or plan to use Extjs. Why we chose extjs?

All Materials Copyright Magenta Corporation Ltd.

Page 2

Why we use Extjs?


The chart below shows statistics of distribution 10 most popular JS Libraries

All Materials Copyright Magenta Corporation Ltd.

Page 3

Why we use Extjs?


The chart below shows statistics of distribution 10 most popular JS Libraries

Where is Extjs on this chart?


All Materials Copyright Magenta Corporation Ltd. Page 4

Why we use Extjs?


JQuery29.92% SWFObject13.12% Adobe Active Content6.74% Prototype5.5% Facebook Connect5.19% Yahoo User Interface4.72% script.aculo.us4.01% jQuery UI3.39% PNG Fix3.11% MooTools2.67% Google JS Api1.76% JCarousel1.41% AC_OETags1.3% Flash Object1.03% JQuery Easing0.93% JQuery UI Tabs0.83% JQuery Validate0.81% JQuery Dimensions0.77% SuperFish0.73% cufn0.59% JCarousel Lite0.55% JSON0.54% Flash Detect0.48% Dojo Toolkit0.46% JQuery ScrollTo0.44% Shadowbox0.38% Javascript Tooltips0.37% SWF Address0.36% Adobe Spry0.34% Milonic0.32% overLIB0.28% BBC Glow0.27% MM Menu0.27% Style Switcher0.21% Nifty Corners0.2% Google Friend Connect0.15% ie7-js0.14% CSS Browser Selector0.14% IE Update0.14% SoThink HTML Menu0.14% Lytebox0.13% Highslide0.11% JQuery Preload0.1% Firebug Lite0.1% Direct Web Remoting0.1% Bit.ly Javascript API0.1%

Extjs 0.09%
HTML 5 Shiv0.09% Prototip0.09% Hier Menus0.08%

All Materials Copyright Magenta Corporation Ltd.

Page 5

Why we use Extjs?


JQuery29.92% SWFObject13.12% Adobe Active Content6.74% Prototype5.5% Facebook Connect5.19% Yahoo User Interface4.72% script.aculo.us4.01% jQuery UI3.39% PNG Fix3.11% MooTools2.67% Google JS Api1.76% JCarousel1.41% AC_OETags1.3% Flash Object1.03% JQuery Easing0.93% JQuery UI Tabs0.83% JQuery Validate0.81% JQuery Dimensions0.77% SuperFish0.73% cufn0.59% JCarousel Lite0.55% JSON0.54% Flash Detect0.48% Dojo Toolkit0.46% JQuery ScrollTo0.44% Shadowbox0.38% Javascript Tooltips0.37% SWF Address0.36% Adobe Spry0.34% Milonic0.32% overLIB0.28% BBC Glow0.27% MM Menu0.27% Style Switcher0.21% Nifty Corners0.2% Google Friend Connect0.15% ie7-js0.14% CSS Browser Selector0.14% IE Update0.14% SoThink HTML Menu0.14% Lytebox0.13% Highslide0.11% JQuery Preload0.1% Firebug Lite0.1% Direct Web Remoting0.1% Bit.ly Javascript API0.1%

Extjs 0.09%
HTML 5 Shiv0.09% Prototip0.09% Hier Menus0.08%

Extjs is not very popular - is it really good for us?

All Materials Copyright Magenta Corporation Ltd.

Page 6

Why we use Extjs?


JQuery29.92% SWFObject13.12% Adobe Active Content6.74% Prototype5.5% Facebook Connect5.19% Yahoo User Interface4.72% script.aculo.us4.01% jQuery UI3.39% PNG Fix3.11% MooTools2.67% Google JS Api1.76% JCarousel1.41% AC_OETags1.3% Flash Object1.03% JQuery Easing0.93% JQuery UI Tabs0.83% JQuery Validate0.81% JQuery Dimensions0.77% SuperFish0.73% cufn0.59% JCarousel Lite0.55% JSON0.54% Flash Detect0.48% Dojo Toolkit0.46% JQuery ScrollTo0.44% Shadowbox0.38% Javascript Tooltips0.37% SWF Address0.36% Adobe Spry0.34% Milonic0.32% overLIB0.28% BBC Glow0.27% MM Menu0.27% Style Switcher0.21% Nifty Corners0.2% Google Friend Connect0.15% ie7-js0.14% CSS Browser Selector0.14% IE Update0.14% SoThink HTML Menu0.14% Lytebox0.13% Highslide0.11% JQuery Preload0.1% Firebug Lite0.1% Direct Web Remoting0.1% Bit.ly Javascript API0.1%

Extjs 0.09%
HTML 5 Shiv0.09% Prototip0.09% Hier Menus0.08%

Extjs is not very popular - is it really good for us? YES

All Materials Copyright Magenta Corporation Ltd.

Page 7

Extjs widgets
Windows looks like OS windows support dragging/resizing/closing

All Materials Copyright Magenta Corporation Ltd.

Page 8

Extjs widgets
Windows looks like OS windows support dragging/resizing/closing

All Materials Copyright Magenta Corporation Ltd.

Page 9

Extjs widgets
Perfect ajax data grid support paging/filtration/sorting
Easy to load/save data to server in different formats

All Materials Copyright Magenta Corporation Ltd.

Page 10

Extjs widgets
Perfect ajax data grid support paging/filtration/sorting
Easy to customize plugins/events support

All Materials Copyright Magenta Corporation Ltd.

Page 11

What else extjs can do?

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

All Materials Copyright Magenta Corporation Ltd.

Page 12

Main extjs classes

Component Panel Observable Store

All Materials Copyright Magenta Corporation Ltd.

Page 13

Component
All widgets extends component class Provide base widget functions like
enable()/disable() show()/hide() addClass()/removeClass() update(data/html) update content area getEl() return element getId() getXType() render(target) focus()

XType alternate way to define component


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.ComponentMgr


get(componentId) registerType(xtype, object) (shorthand Ext.reg())

All Materials Copyright Magenta Corporation Ltd.

Page 14

Containers
handle the basic behavior of containing items, namely adding, inserting and removing items Main functions
add() remove()/removeAll() insert() find()/findBy()/findById()/findByType doLayout() get(index or id)/getComponent(component or index or id)

Main prop
Items - MixedCollection of children components

All Materials Copyright Magenta Corporation Ltd.

Page 15

Panels
Main panel functions/prop/conf prop
load()
panel.load({ url: 'your-url.php', params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string callback: yourFunction, scope: yourObject, // optional scope for the callback discardUrl: false, nocache: false, text: 'Loading...', timeout: 30, scripts: false });

body prop html conf prop autoLoad conf prop

Toolbar and Bottombar Panel subclasses


TabPanel Window FormPanel GridPanel TreePanel

All Materials Copyright Magenta Corporation Ltd.

Page 16

Layouts
Layouts manages by containers there is no need to create Layouts directly The most useful are Fit, VBox, HBox, Border
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

All Materials Copyright Magenta Corporation Ltd.

Page 17

Viewport
A specialized container representing the viewable application area Automaticaly resize itself when browser is resized Example of creation
new Ext.Viewport({ layout : 'border', items : [ { height : 75, region : 'north', title : 'Does Santa live here?' }, { width : 150, region : 'west', title : 'The west region rules' }, { region : 'center', title : 'No, this region rules!' } ] });

All Materials Copyright Magenta Corporation Ltd.

Page 18

Main Ext static functions extend(Function superclass, Object overrides) : Function get/fly(StringId, HTMLElement) - returns element
These methods does not retrieve Components

getBody() - returns element body apply(obj, config, defaults) applyIf(obj, config, defaults) getCmp(id) returns component

All Materials Copyright Magenta Corporation Ltd.

Page 19

GridPanel
Store
contains grid data

GridView
Display store data

ColumnModel - is a class that models how the columns are organized, sized and displayed for the GridPanel widget.
var colModel = new Ext.grid.ColumnModel([ // 1 { sortable : true, header : 'Full Name', dataIndex : 'fullName' // 2 }, { header : 'State', dataIndex : 'state' }]);

Selection model
Define how user is able to select rows
var selModel = new Ext.grid.RowSelectionModel({ // 4 singleSelect : true })

Grid Features: sorting, paging, columns moving / hidding/ resizing Example of configuration
var grid = new Ext.grid.GridPanel({ // 5 title : 'Our first grid', renderTo : Ext.getBody(), autoHeight : true, width : 250, store : store, // 6 view : gridView, colModel : colModel, selModel : selModel });

EditableGridPanel support editing of data Alternatives


DataView consumes data from a Store and paints it on screen using templates ListView lightweight version of gridpanel does not support ColumnModel

All Materials Copyright Magenta Corporation Ltd.

Page 20

Stores
The main purposes of the stores classes are data storage/loading Store contains records object which contain a server data directly
Store is able to insert/update/add records

SubClasses
ArrayStore: Store + ArrayReader
plain js array can be loaded into the array store CRUD operation is going thought custom js method

DirectStore: Store + DirectProxy + JsonReader GroupingStore: store for grid rows grouping JsonStore: Store + JsonReader XmlStore: Store + XmlReader

All Materials Copyright Magenta Corporation Ltd.

Page 21

Stores conf example


this.tableDataStore = new Ext.data.Store({ // destroy a store if destroy the component to which the store was bounded //autoDestroy: true, restful: false, autoSave: false, autoLoad: {params: {start: 0, limit: One.ErrorReview.PAGE_SIZE } }, batch: true, storeId : 'tableDataStore', // load remote data using HTTP proxy : new One.PagingHttpProxy({ method: 'GET', prettyUrls: false, url: '/oms/rest/ErrorReview/TableData/' + Url.getParam('csvInboundInterfaceName'), // see options parameter for Ext.Ajax.request totalUrl: '/oms/rest/ErrorReview/TotalCount/' + Url.getParam('csvInboundInterfaceName'), api: { destroy : {url: '/oms/rest/ErrorReview/DeleteErrorRow/' + Url.getParam('csvInboundInterfaceName'), method: 'DELETE'}, update : {url: '/oms/rest/ErrorReview/UpdateErrorRow/' + Url.getParam('csvInboundInterfaceName'), method: 'PUT'} } }), reader: new Ext.data.JsonReader({ root: 'rows', idProperty: 'ErrorSysId', totalProperty: 'results', // use an Array of field definition objects to implicitly create a Record constructor fields: OneExt.getStoreFields(fieldsArr) }), writer : new Ext.data.JsonWriter({ encode: false, writeAllFields: true, listful : true }), listeners: { write: {fn : this.onSuccessWrite, scope : this}, update: {fn : this.onUpdate, scope : this}, exception: OneExt.showStoreErrorMsg, datachanged: {fn : this.onDataChanged, scope : this}
} });

All Materials Copyright Magenta Corporation Ltd.

Page 22

Proxies
HttpProxy
CRUD operation are processed via ap config or url prop to a server

DirectProxy
CRUD operation is going thought custom js function

MemoryProxy
ctor of MemoryProxy takes data js array as argument and the class does not invoke any requests to a server

ScriptTagProxy
Provide possibility to make request to other domain Other domain server must return valid js text data

OnePagingHttpProxy

All Materials Copyright Magenta Corporation Ltd.

Page 23

Reader conf example


var myReader = new Ext.data.JsonReader({ // metadata configuration options: idProperty: 'id' root: 'rows', totalProperty: 'results', Ext.data.DataReader.messageProperty: "msg" // The element within the response that provides a userfeedback message (optional) // the fields config option will internally create an Ext.data.Record // constructor that provides mapping for reading the record data objects fields: [ // map Record's 'firstname' field to data object's key of same name {name: 'name'}, // map Record's 'job' field to data object's 'occupation' key {name: 'job', mapping: 'occupation'} ] }); { results: 2000, // Reader's configured totalProperty rows: [ // Reader's configured root // record data objects: { id: 1, firstname: 'Bill', occupation: 'Gardener' }, { id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' }, ... ] }

All Materials Copyright Magenta Corporation Ltd.

Page 24

Events
If class should support events this class must extends Observable Observable methods
addListener (shorthand on()) removeListener (shorthand un()) addEvent() fireEvent relayEvent(eventName, targetObj) enableBubble()

Ext.EventObject each event callback have this obj as argument


stopPropagation() preventDefault() stopEvent()

All Materials Copyright Magenta Corporation Ltd.

Page 25

Plugins

All components support plugins customization Plugin is a plain js object with init method, after component is initialized the init() method of plugin is called Plugin can add listeners to component therefore customize behavior of the component

All Materials Copyright Magenta Corporation Ltd.

Page 26

Other widgets

Menus Buttons Dialogs


Ext.MessageBox.show

All Materials Copyright Magenta Corporation Ltd.

Page 27