ExtJS: a powerful Javascript framework

A powerful javascript framework
by
Vincenzo Ferrari

License : Creative Commons (Attribution , Share Alike) 3.0 Generic

License

Open Source License (GPLv3)

Commercial Software License

More info at
http://www.sencha.com/products/extjs/license/


Provided

Familiar and simple to learn (cool documentation)
Fast to develop
Easy to debug
Painless to deploy
Well-organized (powerful mvc architecture)
Extensible (plugin support)
Maintanable


Widget

Grids Drag&Drop QuickTips
Charts Toolbars and Menus Progress Bar
Tabs ComboBox Buttons
Windows Data View Spotlight
Trees Forms Slider
Layout Managers Text Editors
Drawing Panels


Widget - Grids


Widget - Charts


Widget - Tabs


Widget - Windows


Widget - Trees


Widget - Menus


Widget - Toolbars


Widget - Forms


Base
Class System Application Architecture
Ext Ext.app.Application
Ext.Base Ext.app.Controller
Ext.Class Ext.ModelManager
Ext.Loader Ext.state.CookieProvider

DOM & Browser Support
Ext.DomQuery Ext.is
Ext.core.Element Ext.env.Browser
Ext.Img Ext.env.OS
Ext.Ajax Ext.supports
Ext.data.JsonP Ext.Version


View
Containers & Panels Layouts
Ext.container.Viewport Ext.layout.Layout
Ext.panel.Panel Ext.layout.container.Accordion
Ext.tab.Panel Ext.layout.container.Anchor
Ext.tree.Panel Ext.layout.container.HBox
Ext.grid.Panel Ext.layout.container.VBox

Draw
Ext.draw.Color
Ext.draw.Component
Ext.draw.Sprite
Ext.draw.Surface


Components
Form Charts Tree
Ext.form.Basic Ext.chart.Chart Ext.tree.Panel
Ext.form.field.Base Ext.chart.Legend Ext.data.Tree
Ext.form.field.Text Ext.chart.Label Ext.data.TreeStore
Ext.form.field.TextArea Ext.chart.Navigation Ext.tree.View

Toolbar Grid Menu
Ext.toolbar.Toolbar Ext.grid.Panel Ext.menu.Menu
Ext.toolbar.Item Ext.view.Table Ext.menu.CheckItem
Ext.toolbar.Separator Ext.view.BoundList Ext.menu.Manager
Ext.toolbar.TextItem Ext.view.View Ext.menu.Separator


Data
Models Proxies
Ext.data.Model Ext.data.proxy.Ajax
Ext.data.Field Ext.data.proxy.JsonP
Ext.data.validations Ext.data.proxy.Rest
Ext.data.Errors Ext.data.proxy.LocalStorage

Stores Readers & Writers
Ext.data.Store Ext.data.reader.Reader
Ext.data.StoreManager Ext.data.reader.Xml
Ext.data.DirectStore Ext.data.writer.Writer
Ext.data.AbstractStore Ext.data.writer.Xml


Data Package


Model


Utilities
Native Extensions Utility
Ext.Array Ext.util.Sorter
Ext.Object Ext.util.Sortable
Ext.String Ext.util.HashMap
Ext.JSON Ext.util.Filter
Ext.Function

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 Methods
isChrome create
isSafari each
isIE get
isOpera getCmp
isGecko getDom
isWebKit getStore
isLinux isArray
isMac isEmpty
isWindows 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');


Ext.Class
Handles class creation throughout the whole framework.

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


Ext.Class – Example 1
Basic Syntax Config
Ext.define ('KnowsPhp', { Ext.define ('Person', {
knows: function () { config: {
alert ('I know PHP!'); name: '' ,
} age: 0
}); },
constructor: function (cfg) {
Ext.define ('KnowsRuby', { this.initConfig (cfg);
knows: function () { return this;
alert ('I know Ruby!'); },
} applyName: function (name) {
}); if (name.length === 0)
alert ('Error!');
Ext.define ('KnowsPython', { else {
knows: function () { this.name = name;
alert ('I know Python!'); return this.name;
} }
}); }
});

Inheritance Mixins
Ext.define ('Thief', { Ext.define ('Developer', {
extend: 'Person' , extend: 'Person' ,
steal: function () { mixins: {
alert ('#Stealing#'); KnowsPhp: 'KnowsPhp' ,
} KnowsRuby: 'KnowsRuby' ,
}); KnowsPython: 'KnowsPython'
},
Ext.define ('Burglar', { knowledge: function () {
extend: 'Person' , alert ('Follows what I know:');
lockpick: function () { this.mixins.KnowsPhp.knows ();
alert ('#Lockpicking#'); this.mixins.KnowsRuby.knows ();
} this.mixins.KnowsPython.knows ();
}); }
});


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


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 Hybrid Solution?
No web server needed Yes, we can!
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


Requirements

Web Browsers
Google Chrome 10+
Apple Safari 5+
Mozilla Firefox 4+

Web Server (is not a requirement but is highly recommended)
Apache (recommended)

ExtJS 4 SDK
Download at http://www.sencha.com/products/extjs


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.


Enough!

Ok, you showed us what you know: great, you did your
homework!
Now we want to see some code!


Build my WebApp
What do I have to know to build my first web application?

File Structure

/var/www/
index.html
app.js
ext/
app/
controller/
model/
store/
view/


Credits

Vincenzo Ferrari
wilk3ert@gmail.com


ExtJS: a powerful Javascript framework

Recommandé

Recommandé

Contenu connexe

Similaire à ExtJS: a powerful Javascript framework

Similaire à ExtJS: a powerful Javascript framework (20)

Dernier

Dernier (20)

ExtJS: a powerful Javascript framework