ExtJS: a powerful Javascript framework
-
Upload
vincenzo-ferrari -
Category
Technology
-
view
1.907 -
download
0
Transcript of ExtJS: a powerful Javascript framework
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
A powerful javascript frameworkbyVincenzo Ferrari
License
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Open Source License (GPLv3)
Commercial Software License
More info athttp://www.sencha.com/products/extjs/license/
Provided
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Familiar and simple to learn (cool documentation)Fast to developEasy to debugPainless to deployWell-organized (powerful mvc architecture)Extensible (plugin support)Maintanable
Widget
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
GridsChartsTabsWindowsTreesLayout ManagersDrawing
Drag&DropToolbars and MenusComboBoxData ViewFormsText EditorsPanels
QuickTipsProgress BarButtonsSpotlightSlider
Widget - Grids
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Widget - Charts
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Widget - Tabs
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Widget - Windows
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Widget - Trees
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Widget - Menus
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Widget - Toolbars
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Widget - Forms
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Base
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Model
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Utilities
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Native ExtensionsExt.ArrayExt.ObjectExt.StringExt.JSONExt.Function
UtilityExt.util.SorterExt.util.SortableExt.util.HashMapExt.util.Filter
EventsExt.TaskManagerExt.EventManagerExt.EventObjectExt.util.Observable
Ext
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
The Ext namespace (global object) encapsulates all classes, singletons, and utility methods provided by Sencha's libraries.
PropertiesisChromeisSafariisIEisOperaisGeckoisWebKitisLinuxisMacisWindows
MethodscreateeachgetgetCmpgetDomgetStoreisArrayisEmptyisObjectonDocumentReadyonReady
Ext - Examples
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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!
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Ok, you showed us what you know: great, you did your homework!Now we want to see some code!
Build my WebApp
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
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
License : Creative Commons (Attribution , Share Alike) 3.0 Generic
Vincenzo [email protected]