All Materials Copyright Magenta Corporation Ltd. Page 1 Extjs Overview.

All Materials Copyright Magenta Corporation Ltd. Page 1

Extjs Overview


Why we use Extjs?

We have several projects in Magenta which have already

used or plan to use Extjs. Why we chose extjs?


Why we use Extjs?The chart below shows statistics of distribution 10 most popular JS Libraries


Why we use Extjs?The chart below shows statistics of distribution 10 most popular JS Libraries

Where is Extjs on this chart?


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%

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%

SuperFish0.73%

cufón0.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%


Why we use Extjs?

JQuery29.92%

SWFObject13.12%


Prototype5.5%




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%



ie7-js0.14%


IE Update0.14%


Lytebox0.13%

Highslide0.11%

JQuery Preload0.1%

Firebug Lite0.1%




Prototip0.09%

Hier Menus0.08%

SuperFish0.73%

cufón0.59%

JCarousel Lite0.55%

JSON0.54%

Flash Detect0.48%

Dojo Toolkit0.46%


Shadowbox0.38%


SWF Address0.36%

Adobe Spry0.34%

Milonic0.32%

overLIB0.28%

BBC Glow0.27%

MM Menu0.27%

Style Switcher0.21%

Nifty Corners0.2%


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


Why we use Extjs?

ie7-js0.14%


IE Update0.14%


Lytebox0.13%

Highslide0.11%

JQuery Preload0.1%

Firebug Lite0.1%




Prototip0.09%

Hier Menus0.08%

SuperFish0.73%

cufón0.59%

JCarousel Lite0.55%

JSON0.54%

Flash Detect0.48%

Dojo Toolkit0.46%


Shadowbox0.38%


SWF Address0.36%

Adobe Spry0.34%

Milonic0.32%

overLIB0.28%

BBC Glow0.27%

MM Menu0.27%

Style Switcher0.21%

Nifty Corners0.2%


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

JQuery29.92%

SWFObject13.12%


Prototype5.5%




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%




Extjs widgets

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


Extjs widgetsWindows looks like OS windows – support dragging/resizing/closing


Extjs widgets

Perfect ajax data grid – support paging/filtration/sortingEasy to load/save data to server in different formats


Extjs widgets

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


What else extjs can do?

Ajax support

Dom traversing

Dom manipulation

Event Handling

Selectors

OOP emulation

Animation


Main extjs classes

Component

Panel

Observable

Store


Component

All widgets extends component classProvide base widget functions like

enable()/disable()show()/hide()addClass()/removeClass()update(data/html) – update content areagetEl() return elementgetId()getXType()render(target)focus()

XType – alternate way to define componentLazy 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.ComponentMgrget(componentId) registerType(xtype, object) (shorthand Ext.reg())


Containers

handle the basic behavior of containing items, namely adding, inserting and removing items Main functions

add()remove()/removeAll()insert()find()/findBy()/findById()/findByTypedoLayout()get(index or id)/getComponent(component or index or id)

Main propItems - MixedCollection of children components


PanelsMain 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 – prophtml – conf propautoLoad – conf prop

Toolbar and BottombarPanel subclasses

TabPanelWindow FormPanelGridPanel TreePanel


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


Viewport

A specialized container representing the viewable application area Automaticaly resize itself when browser is resizedExample 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!'• }• ]• });


Main Ext static functions

extend(Function superclass, Object overrides) : Function

get/fly(StringId, HTMLElement) - returns elementThese methods does not retrieve Components

getBody() - returns element body

apply(obj, config, defaults)

applyIf(obj, config, defaults)

getCmp(id) – returns component


GridPanel Store

contains grid dataGridView

Display store dataColumnModel - 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 modelDefine how user is able to select rows

– var selModel = new Ext.grid.RowSelectionModel({ // 4– singleSelect : true– })

Grid Features: sorting, paging, columns moving / hidding/ resizingExample 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 dataAlternatives

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


StoresThe main purposes of the stores classes are data storage/loadingStore 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

DirectStore: Store + DirectProxy + JsonReader• CRUD operation is going thought custom js method

GroupingStore: store for grid rows grouping JsonStore: Store + JsonReaderXmlStore: Store + XmlReader


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} } });


Proxies

HttpProxyCRUD operation are processed via ap config or url prop to a server

DirectProxyCRUD operation is going thought custom js function

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

ScriptTagProxyProvide possibility to make request to other domainOther domain server must return valid js text data

OnePagingHttpProxy


Reader conf examplevar 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 user-feedback 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' }, ... ]}


Events

If class should support events this class must extends ObservableObservable methods

addListener (shorthand on())removeListener (shorthand un())addEvent()fireEventrelayEvent(eventName, targetObj)enableBubble()

Ext.EventObject – each event callback have this obj as argument

stopPropagation()preventDefault()stopEvent()


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


Other widgets

Menus

Buttons

DialogsExt.MessageBox.show

All Materials Copyright Magenta Corporation Ltd. Page 1 Extjs Overview.

Documents

extjs overview slide

jquery easingjquery

jquery preloadjquery

jquery uijquery ui3

jquery ui tabsjquery

google js apigoogle

javascript api0

popular js libraries