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%
All Materials Copyright Magenta Corporation Ltd.
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%
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%
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%
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%
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%
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%
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
DirectStore: Store + DirectProxy + JsonReader
•
CRUD operation is going thought custom js method
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