extjs: a powerful javascript framework

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

A powerful javascript frameworkbyVincenzo Ferrari

License


Open Source License (GPLv3)

Commercial Software License

More info athttp://www.sencha.com/products/extjs/license/

Provided


Familiar and simple to learn (cool documentation)Fast to developEasy to debugPainless to deployWell-organized (powerful mvc architecture)Extensible (plugin support)Maintanable

Widget


GridsChartsTabsWindowsTreesLayout ManagersDrawing

Drag&DropToolbars and MenusComboBoxData ViewFormsText EditorsPanels

QuickTipsProgress BarButtonsSpotlightSlider

Widget - Grids


Widget - Charts


Widget - Tabs


Widget - Windows


Widget - Trees


Widget - Menus


Widget - Toolbars


Widget - Forms


Base


Class SystemExtExt.BaseExt.ClassExt.Loader

Application ArchitectureExt.app.ApplicationExt.app.ControllerExt.ModelManagerExt.state.CookieProvider

DOM & BrowserExt.DomQueryExt.core.ElementExt.ImgExt.AjaxExt.data.JsonP

SupportExt.isExt.env.BrowserExt.env.OSExt.supportsExt.Version

View


Containers & PanelsExt.container.ViewportExt.panel.PanelExt.tab.PanelExt.tree.PanelExt.grid.Panel

LayoutsExt.layout.LayoutExt.layout.container.AccordionExt.layout.container.AnchorExt.layout.container.HBoxExt.layout.container.VBox

DrawExt.draw.ColorExt.draw.ComponentExt.draw.SpriteExt.draw.Surface

Components


FormExt.form.BasicExt.form.field.BaseExt.form.field.TextExt.form.field.TextArea

ChartsExt.chart.ChartExt.chart.LegendExt.chart.LabelExt.chart.Navigation

TreeExt.tree.PanelExt.data.TreeExt.data.TreeStoreExt.tree.View

ToolbarExt.toolbar.ToolbarExt.toolbar.ItemExt.toolbar.SeparatorExt.toolbar.TextItem

GridExt.grid.PanelExt.view.TableExt.view.BoundListExt.view.View

MenuExt.menu.MenuExt.menu.CheckItemExt.menu.ManagerExt.menu.Separator

Data


ModelsExt.data.ModelExt.data.FieldExt.data.validationsExt.data.Errors

ProxiesExt.data.proxy.AjaxExt.data.proxy.JsonPExt.data.proxy.RestExt.data.proxy.LocalStorage

StoresExt.data.StoreExt.data.StoreManagerExt.data.DirectStoreExt.data.AbstractStore

Readers & WritersExt.data.reader.ReaderExt.data.reader.XmlExt.data.writer.WriterExt.data.writer.Xml

Data Package


Model


Utilities


Native ExtensionsExt.ArrayExt.ObjectExt.StringExt.JSONExt.Function

UtilityExt.util.SorterExt.util.SortableExt.util.HashMapExt.util.Filter

EventsExt.TaskManagerExt.EventManagerExt.EventObjectExt.util.Observable

Ext


The Ext namespace (global object) encapsulates all classes, singletons, and utility methods provided by Sencha's libraries.

PropertiesisChromeisSafariisIEisOperaisGeckoisWebKitisLinuxisMacisWindows

MethodscreateeachgetgetCmpgetDomgetStoreisArrayisEmptyisObjectonDocumentReadyonReady

Ext - Examples


Ext.createvar win = Ext.create ('Ext.window.Window', {id: 'win1'});

Ext.eachvar operatingSystems = ['Linux', 'Mac', 'Windows'];Ext.each (operatingSystems, function (item, index, array) {alert ('Current OS is: ' + item);});

Ext.get......var cl = Ext.get ('chatlog');cl.setVisible (false);

Ext.getCmpvar win = Ext.getCmp ('win1');

Ext.Class


Handles class creation throughout the whole framework.

Basic SyntaxExt.define ('MyClass', {prop: val, ...});

InheritanceExt.define ('MyClass', {extend: 'OtherClass', });

MixinsExt.define ('MyClass', {mixins: {OtherClass: 'OtherClass'}, });

ConfigExt.define ('MyClass', {config: {prop: val}, });

StaticsExt.define ('MyClass', {statics: {prop: val}, });

Ext.Class Example 1


Basic SyntaxExt.define ('KnowsPhp', {knows: function () {alert ('I know PHP!');}});

Ext.define ('KnowsRuby', {knows: function () {alert ('I know Ruby!');}});

Ext.define ('KnowsPython', {knows: function () {alert ('I know Python!');}});

ConfigExt.define ('Person', {config: {name: '' ,age: 0} ,constructor: function (cfg) {this.initConfig (cfg);return this;} ,applyName: function (name) {if (name.length === 0)alert ('Error!');else {this.name = name;return this.name;}}});

Ext.Class Example 2


InheritanceExt.define ('Thief', {extend: 'Person' ,steal: function () {alert ('#Stealing#');}});

Ext.define ('Burglar', {extend: 'Person' ,lockpick: function () {alert ('#Lockpicking#');}});

MixinsExt.define ('Developer', {extend: 'Person' ,mixins: {KnowsPhp: 'KnowsPhp' ,KnowsRuby: 'KnowsRuby' ,KnowsPython: 'KnowsPython'} ,knowledge: function () {alert ('Follows what I know:');this.mixins.KnowsPhp.knows ();this.mixins.KnowsRuby.knows ();this.mixins.KnowsPython.knows ();}});

Ext.Class Example 3


StaticsExt.define ('PCCreator', {statics: {computerCounter: 0 ,factory: function (name) {return new this (name);}} ,config: {name: ''} ,constructor: function (cfg) {this.initConfig (cfg);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);

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 LoadingAdvantagesCross-domainNo web server neededBest possible debuggingDisadvantagesDependencies need to be specified before-hand

Synchronous Loading on DemandAdvantagesThere's no need to specify dependencies before-handDisadvantagesNot as good debugging experienceMust be from the same domain due to XHR restrictionNeed a web server

Hybrid Solution?Yes, we can!

Requirements


Web BrowsersGoogle Chrome 10+Apple Safari 5+Mozilla Firefox 4+

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

ExtJS 4 SDKDownload 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.

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

ViewIs any type of component - grids, trees and panels are all views.

ControllersAre 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.htmlapp.jsext/app/controller/

model/

store/

view/

Credits


Vincenzo [email protected]

extjs: a powerful javascript framework

Technology