ExtJS framework

License : Creative Commons (Attribution , Share Alike) 3.0 Generic
A powerful javascript framework
by
Vincenzo Ferrari

Index
1. Loader
2. Class System
3. Design Patterns
4. MVC
5. Charts

Ext.Loader
Ext.Loader is the heart of the new dynamic dependency loading
capability in Ext JS 4+. It is most commonly used via the Ext.require
shorthand. Ext.Loader supports both asynchronous and synchronous
loading approaches.
Asynchronous Loading
Advantages
Cross-domain
No web server needed
Best possible debugging
Disadvantages
Dependencies need to be specified before-hand
Synchronous Loading on Demand
Advantages
There's no need to specify dependencies before-hand
Disadvantages
Not as good debugging experience
Must be from the same domain due to XHR restriction
Need a web server
Hybrid Solution
It has all the advantages
combined from
asynchronous and
synchronous loading

Ext.Loader – Sync
Ext.create & Ext.widget
// Instead of new Ext.window.Window({...});
Ext.create('widget.window', { ... });
// Same as above, using full class name instead of alias
Ext.create('Ext.window.Window', {});
// Same as above, all you need is the traditional `xtype`
Ext.widget('window', {});
Behind the scene, Ext.ClassManager will automatically check whether the given
class name / alias has already existed on the page. If it's not, Ext.Loader will
immediately switch itself to synchronous mode and automatic load the given class
and all its dependencies.

Ext.Loader – Async
Ext.require
// Syntax
Ext.require({String/Array} expressions);
// Single alias
Ext.require('widget.window');
// Single class name
Ext.require('Ext.window.Window');
// Multiple aliases / class names mix
Ext.require(['widget.window',
'layout.border', 'Ext.data.Connection']);
// Wildcards
Ext.require(['widget.*', 'layout.*',
'Ext.data.*']);
Ext.exclude
// Syntax: Note that it must be in this
chaining format.
Ext.exclude({String/Array} expressions)
.require({String/Array} expressions);
// Include everything except Ext.data.*
Ext.exclude('Ext.data.*').require('*');
// Include all widgets except
widget.checkbox*,which will match
widget.checkbox, widget.checkboxfield,
widget.checkboxgroup, etc.
Ext.exclude('widget.checkbox*').require('wi
dget.*');

Ext.Loader – Hybrid
Ext.create + Ext.require
// Enable the dynamic dependency loading feature
Ext.Loader.setConfig ({
enabled: true
});
Ext.require (['Ext.window.Window']);
// Ready when all dependecies has loaded
Ext.onReady(function () {
var window = Ext.create ('Ext.window.Window', {
title: 'My Window',
width: 300,
height: 300,
...
});
});

Class System – Naming Convention
Classes
Ext.data.Model
Ext.Loader
Ext.data.proxy.Ajax
Source files
Ext.data.Model is stored in /path/to/src/Ext/data/Model.js
Ext.Loader is stored in /path/to/src/Ext/Loader.js
Ext.form.action.Submit is stored in /path/to/src/Ext/form/action/Submi.js
Methods and Variables
encodeUsingMd5()
getHtml()
Properties
Ext.MessageBox.YES
Ext.MessageBox.NO

Class System – Hands On
Basic Syntax
Ext.define ('MyClass', {prop: val, ...});
Inheritance
Ext.define ('MyClass', {extend: 'OtherClass', …});
Mixins
Ext.define ('MyClass', {mixins: {OtherClass: 'OtherClass'}, …});
Config
Ext.define ('MyClass', {config: {prop: val}, …});
Statics
Ext.define ('MyClass', {statics: {prop: val}, …});

Class System – Basic Syntax
Ext.define ('KnowsPhp', {
knows: function () {
alert ('I know PHP!');
}
});
Ext.define ('KnowsRuby', {
alert ('I know Ruby!');
}
});
Ext.define ('KnowsPython', {
alert ('I know Python!');
}
});
Ext.define ('MyClass', {
constructor: function (cfg) {
// class initialization
return this;
}
});
Ext.define ('My.weird.Class', {
// do something with cfg
return this;
} ,
doSomethingWeird: function () {
// something weird
}
});

Class System – Config
Ext.define ('Person', {
config: {
name: '' ,
age: 0
} ,
this.initConfig (cfg);
return this;
} ,
applyName: function (name) {
if (name.length === 0)
alert ('Error!');
else {
this.name = name;
return this.name;
}
} ,
applyAge: function (age) {
if ((age < 0) || (age > 99))
alert ('Error!');
else {
this.age = age;
return this.age;
}
}
});

Class System – Inheritance
Ext.define ('Thief', {
extend: 'Person' ,
steal: function () {
alert (this.getName()+' is
stealing!');
}
});
Ext.define ('Burglar', {
extend: 'Person' ,
lockpick: function () {
alert ('#Lockpicking#');
}
});
Ext.define ('AdvancedThief', {
extend: 'Thief' ,
config: {
tool: ''
} ,
return this;
} ,
steal: function () {
alert ('Stealing with '+this.getTool());
} ,
applyTool: function (tool) {
if (tool.length === 0) alert ('Error!');
else {
this.tool = tool;
return this.tool;
}
}
});

Class System – Mixins
Ext.define ('Developer', {
extend: 'Person' ,
mixins: {
KnowsPhp: 'KnowsPhp' ,
KnowsRuby: 'KnowsRuby' ,
KnowsPython: 'KnowsPython'
} ,
knowledge: function () {
alert ('Follows what '+this.getName()+' knows:');
this.mixins.KnowsPhp.knows ();
this.mixins.KnowsRuby.knows ();
this.mixins.KnowsPython.knows ();
}
});

Class System – Statics
Ext.define ('PCCreator', {
statics: {
computerCounter: 0 ,
factory: function (name) {
return new this (name);
}
} ,
config: {
name: ''
} ,
this.self.computerCounter++;
return this;
}
});
var dell = PCCreator.factory ('Dell');
var asus = PCCreator.factory ('Asus');
var hp = PCCreator.factory ('HP');
Alert (dell.name);
Alert (asus.name);
Alert (hp.name);
Alert (PCCreator.computerCounter);

Design Patterns
Singleton (Ext.Class.singleton)
Observer (Ext.util.Observable)
Memento (Ext.util.Memento)
ExtJS is made by different design patterns, like Factory, Bridge, Decorator,
Proxy, etc.

Design Patterns – Singleton
Ext.define ('My.window.Manager', {
singleton: true ,
config: {
windows: Ext.create ('Ext.util.HashMap')
} ,
register: function (win) {
this.getWindows().add (win.getId (), win);
} ,
unregister: function (id) {
this.getWindows().removeAtKey (id);
}
});

Design Patterns – Singleton
var win = Ext.create ('Ext.window.Window', {
id: 'myWin' ,
title: 'My Window' ,
width: 300 ,
height: 300
});
My.window.Manager.register (win);
var myWin = My.window.Manager.getWindows().get (win.getId ());
My.window.Manager.unregister (win.getId ());

Design Patterns – Observer
Ext.define ('My.observable.Object', {
mixins: {
observable: 'Ext.util.Observable'
} ,
this.mixins.observable.constructor.call (this, cfg);
this.addEvents (['event2fire']);
} ,
doSomething: function () {
this.fireEvent ('event2fire', this, 'Done, dude!');
}
});

Design Patterns – Observer
var myObject = Ext.create ('My.observable.Object');
myObject.on ('event2fire', function (myObj, message) {
// Will alert 'Done, dude!'
alert (message);
});
myObject.doSomething ();

Design Patterns – Memento
var memento = Ext.create ('Ext.util.Memento');
var obj = {
prop: 10 ,
method: function () {
alert (this.prop);
}
};
obj.method (); // Will alert '10'
memento.capture (['prop', 'method'], obj);
obj.prop = 20;
obj.method = function () {
alert (this.prop + ' numbers');
}
obj.method (); // Will alert '20 numbers'
memento.restoreAll (true, obj);
obj.method (); // Will alert '10'

MVC – Architecture
Ext JS 4 comes with a new application architecture that not only organizes
your code but reduces the amount you have to write.
Model
Is a collection of fields and their data (e.g. a User model with username and
password fields). Models know how to persist themselves through the data
package, and can be linked to other models through associations. Models are
normally used with Stores to present data into grids and other components.
View
Is any type of component - grids, trees and panels are all views.
Controllers
Are special places to put all of the code that makes your app work - whether that's
rendering views, instantiating Models, or any other app logic.

MVC – Folder Tree
File Structure
/var/www/
index.html
app.js
ext/
app/
controller/
model/
store/
view/

MVC – App Definition
First of all, the definition of the application, that includes dependencies
requirements, namespace
/project/app.js
// dependencies
Ext.Loader.setConfig ({
enabled: true
});
Ext.require (['*']);
Ext.application ({
// namespace
name: 'MyApp' ,
views: [] ,
models: [] ,
stores: [] ,
controllers: [] ,
// init function
launch: function () {
// initialize the app
}
});

MVC – View
Views are the representation of data
/project/app/view/MyGrid.js
Ext.define ('MyApp.view.MyGrid', {
extend: 'Ext.grid.Panel' ,
alias: 'widget.mygrid' ,
...
});
/project/app/view/MyMenu.js
Ext.define ('MyApp.view.MyMenu', {
extend: 'Ext.toolbar.Toolbar' ,
alias: 'widget.mymenu' ,
...
});

MVC – View (Viewport)
Main view, where the other views are rendered
/project/app/view/Viewport.js
Ext.define ('MyApp.view.Viewport', {
extend: 'Ext.container.Viewport' ,
// enable xtypes
requires: [
'MyApp.view.MyGrid' ,
'MyApp.view.MyMenu'
] ,
items: [{
xtype: 'mygrid' ,
title: 'My Grid!' ,
region: 'center' ,
...
} , {
xtype: 'mygrid' ,
title: 'My Menu' ,
region: 'north' ,
...
}]
});

MVC – Model
Models are the core of data:
they are objects, wrapped in Ext.data.Field class
/project/app/model/MyGrid.js
Ext.define ('MyApp.model.MyGrid', {
extend: 'Ext.data.Model' ,
fields: [
{name: 'age', type: 'int', defaultValue: 1} ,
{name: 'name', type: 'string', defaultValue: 'foo'} ,
{name: 'data', type: 'date' , dateFormat: 'YmdHis'} ,
{name: 'cash', type: 'string' , convert: function (value, record) {
return value + '€';
}}
]
});
And others useful tips for fields: sortDir, useNull, mapping, etc...

Model

MVC – Store
Stores are arrays of model
/project/app/store/MyGrid.js
Ext.define ('MyApp.store.MyGrid', {
extend: 'Ext.data.Store' ,
// name of the model class
model: 'MyApp.model.MyGrid' ,
proxy: {
type: 'ajax' ,
url: '/myUrl' ,
api: {
create: '/myUrl/create' ,
read: '/myUrl/read' ,
update: '/myUrl/update' ,
destroy: '/myUrl/destroy'
} ,
reader: {
type: 'json' ,
root: 'User' ,
record: 'users'
}
}
});

Data Package

MVC – Controller
Controllers are the glue between models/stores and views:
all the app logic is handled here
/project/app/controller/MyGrid.js
Ext.define ('MyApp.controller.MyGrid', {
extend: 'Ext.app.Controller' ,
views: ['MyGrid'] ,
models: ['MyGrid'] ,
stores: ['MyGrid'] ,
init: function () {
this.control ({
'mygrid': {
itemdblclick: this.workOnRow
}
});
} ,
workOnRow: function (grid, record) {
this.getMyGridStore().load();
...
}
});

Charts

Charts – Definition
Ext.create ('Ext.chart.Chart', {
width: 300 ,
height: 300 ,
store: store,
axes: [{
title: 'Name' ,
fields: ['name'] ,
position: 'bottom',
type: 'Category'
} , {
title: 'Balances',
position: 'left',
fields: ['balance'] ,
type: 'Numeric'
}] ,
series: [{
type: 'line',
xField: 'name',
yField: 'balance'
}]
});
One of the innovation that comes with ExtJS is Ext.chart.Chart

Charts – Axes
Axes types
Axis: base class
Category: A type of axis that displays items in
categories.
Gauge: Gauge Axis is the axis to be used with a
Gauge series. The Gauge axis displays numeric
data from an interval.
Numeric: An axis to handle numeric values.
Time: A type of axis whose units are measured
in time values.
axes: [{
title: 'Name' ,
fields: ['name'] ,
position: 'bottom',
type: 'Category'
} , {
title: 'Balances',
position: 'left',
fields: ['balance'] ,
type: 'Numeric'
}]
Axes are the lines that define the boundaries of the data points that a Chart
can display.

Charts – Series
series: [{
type: 'line',
xField: 'name',
yField: 'balance'
}]
Series are responsible for the visual representation of the data points
contained in the Store.
Series
Area
Bar
Cartesian
Column
Series types
Gauge
Line
Pie
Radar
Scatter

Index
1. Loader
2. Class System
3. Design Patterns
4. MVC
5. Charts
6. Misc (dafaq?)

Utilities
Native Extensions
Ext.Array
Ext.Object
Ext.String
Ext.JSON
Ext.Function
Utility
Ext.util.Sorter
Ext.util.Sortable
Ext.util.HashMap
Ext.util.Filter
Events
Ext.TaskManager
Ext.EventManager
Ext.EventObject
Ext.util.Observable

Ext
The Ext namespace (global object) encapsulates all classes, singletons, and
utility methods provided by Sencha's libraries.
Properties
isChrome
isSafari
isIE
isOpera
isGecko
isWebKit
isLinux
isMac
isWindows
Methods
create
each
get
getCmp
getDom
getStore
isArray
isEmpty
isObject
onDocumentReady
onReady

Ext - Examples
Ext.create
var win = Ext.create ('Ext.window.Window', {id: 'win1'});
Ext.each
var operatingSystems = ['Linux', 'Mac', 'Windows'];
Ext.each (operatingSystems, function (item, index, array) {
alert ('Current OS is: ' + item);
});
Ext.get
<div id=”chatlog”>......</div>
var cl = Ext.get ('chatlog');
cl.setVisible (false);
Ext.getCmp
var win = Ext.getCmp ('win1');

Credits
Vincenzo Ferrari
wilk3ert@gmail.com

ExtJS framework

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (8)

Ähnlich wie ExtJS framework

Ähnlich wie ExtJS framework (20)

Mehr von Vincenzo Ferrari

Mehr von Vincenzo Ferrari (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

ExtJS framework