ExtJS framework

1,368 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,368
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
75
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

ExtJS framework

  1. 1. License : Creative Commons (Attribution , Share Alike) 3.0 GenericA powerful javascript frameworkbyVincenzo Ferrari
  2. 2. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts
  3. 3. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts
  4. 4. Ext.LoaderLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.Loader is the heart of the new dynamic dependency loadingcapability in Ext JS 4+. It is most commonly used via the Ext.requireshorthand. Ext.Loader supports both asynchronous and synchronousloading approaches.Asynchronous LoadingAdvantagesCross-domainNo web server neededBest possible debuggingDisadvantagesDependencies need to be specified before-handSynchronous Loading on DemandAdvantagesTheres no need to specify dependencies before-handDisadvantagesNot as good debugging experienceMust be from the same domain due to XHR restrictionNeed a web serverHybrid SolutionIt has all the advantagescombined fromasynchronous andsynchronous loading
  5. 5. Ext.Loader – SyncLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.create & Ext.widget// Instead of new Ext.window.Window({...});Ext.create(widget.window, { ... });// Same as above, using full class name instead of aliasExt.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 givenclass name / alias has already existed on the page. If its not, Ext.Loader willimmediately switch itself to synchronous mode and automatic load the given classand all its dependencies.
  6. 6. Ext.Loader – AsyncLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.require// SyntaxExt.require({String/Array} expressions);// Single aliasExt.require(widget.window);// Single class nameExt.require(Ext.window.Window);// Multiple aliases / class names mixExt.require([widget.window,layout.border, Ext.data.Connection]);// WildcardsExt.require([widget.*, layout.*,Ext.data.*]);Ext.exclude// Syntax: Note that it must be in thischaining format.Ext.exclude({String/Array} expressions).require({String/Array} expressions);// Include everything except Ext.data.*Ext.exclude(Ext.data.*).require(*);// Include all widgets exceptwidget.checkbox*,which will matchwidget.checkbox, widget.checkboxfield,widget.checkboxgroup, etc.Ext.exclude(widget.checkbox*).require(widget.*);
  7. 7. Ext.Loader – HybridLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.create + Ext.require// Enable the dynamic dependency loading featureExt.Loader.setConfig ({enabled: true});Ext.require ([Ext.window.Window]);// Ready when all dependecies has loadedExt.onReady(function () {var window = Ext.create (Ext.window.Window, {title: My Window,width: 300,height: 300,...});});
  8. 8. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts
  9. 9. Class System – Naming ConventionLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericClassesExt.data.ModelExt.LoaderExt.data.proxy.AjaxSource filesExt.data.Model is stored in /path/to/src/Ext/data/Model.jsExt.Loader is stored in /path/to/src/Ext/Loader.jsExt.form.action.Submit is stored in /path/to/src/Ext/form/action/Submi.jsMethods and VariablesencodeUsingMd5()getHtml()PropertiesExt.MessageBox.YESExt.MessageBox.NO
  10. 10. Class System – Hands OnLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericBasic 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}, …});
  11. 11. Class System – Basic SyntaxLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.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!);}});Ext.define (MyClass, {constructor: function (cfg) {// class initializationreturn this;}});Ext.define (My.weird.Class, {constructor: function (cfg) {// do something with cfgreturn this;} ,doSomethingWeird: function () {// something weird}});
  12. 12. Class System – ConfigLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.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;}} ,applyAge: function (age) {if ((age < 0) || (age > 99))alert (Error!);else {this.age = age;return this.age;}}});
  13. 13. Class System – InheritanceLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.define (Thief, {extend: Person ,steal: function () {alert (this.getName()+ isstealing!);}});Ext.define (Burglar, {extend: Person ,lockpick: function () {alert (#Lockpicking#);}});Ext.define (AdvancedThief, {extend: Thief ,config: {tool: } ,constructor: function (cfg) {this.initConfig (cfg);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;}}});
  14. 14. Class System – MixinsLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.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 ();}});
  15. 15. Class System – StaticsLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.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);
  16. 16. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts
  17. 17. Design PatternsLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericSingleton (Ext.Class.singleton)Observer (Ext.util.Observable)Memento (Ext.util.Memento)ExtJS is made by different design patterns, like Factory, Bridge, Decorator,Proxy, etc.
  18. 18. Design Patterns – SingletonLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.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);}});
  19. 19. Design Patterns – SingletonLicense : Creative Commons (Attribution , Share Alike) 3.0 Genericvar 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 ());
  20. 20. Design Patterns – ObserverLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.define (My.observable.Object, {mixins: {observable: Ext.util.Observable} ,constructor: function (cfg) {this.initConfig (cfg);this.mixins.observable.constructor.call (this, cfg);this.addEvents ([event2fire]);} ,doSomething: function () {this.fireEvent (event2fire, this, Done, dude!);}});
  21. 21. Design Patterns – ObserverLicense : Creative Commons (Attribution , Share Alike) 3.0 Genericvar myObject = Ext.create (My.observable.Object);myObject.on (event2fire, function (myObj, message) {// Will alert Done, dude!alert (message);});myObject.doSomething ();
  22. 22. Design Patterns – MementoLicense : Creative Commons (Attribution , Share Alike) 3.0 Genericvar memento = Ext.create (Ext.util.Memento);var obj = {prop: 10 ,method: function () {alert (this.prop);}};obj.method (); // Will alert 10memento.capture ([prop, method], obj);obj.prop = 20;obj.method = function () {alert (this.prop + numbers);}obj.method (); // Will alert 20 numbersmemento.restoreAll (true, obj);obj.method (); // Will alert 10
  23. 23. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts
  24. 24. MVC – ArchitectureLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt JS 4 comes with a new application architecture that not only organizesyour code but reduces the amount you have to write.ModelIs a collection of fields and their data (e.g. a User model with username andpassword fields). Models know how to persist themselves through the datapackage, and can be linked to other models through associations. Models arenormally 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 thatsrendering views, instantiating Models, or any other app logic.
  25. 25. MVC – Folder TreeLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericFile Structure/var/www/index.htmlapp.jsext/app/controller/model/store/view/
  26. 26. MVC – App DefinitionLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericFirst of all, the definition of the application, that includes dependenciesrequirements, namespace/project/app.js// dependenciesExt.Loader.setConfig ({enabled: true});Ext.require ([*]);Ext.application ({// namespacename: MyApp ,views: [] ,models: [] ,stores: [] ,controllers: [] ,// init functionlaunch: function () {// initialize the app}});
  27. 27. MVC – ViewLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericViews are the representation of data/project/app/view/MyGrid.jsExt.define (MyApp.view.MyGrid, {extend: Ext.grid.Panel ,alias: widget.mygrid ,...});/project/app/view/MyMenu.jsExt.define (MyApp.view.MyMenu, {extend: Ext.toolbar.Toolbar ,alias: widget.mymenu ,...});
  28. 28. MVC – View (Viewport)License : Creative Commons (Attribution , Share Alike) 3.0 GenericMain view, where the other views are rendered/project/app/view/Viewport.jsExt.define (MyApp.view.Viewport, {extend: Ext.container.Viewport ,// enable xtypesrequires: [MyApp.view.MyGrid ,MyApp.view.MyMenu] ,items: [{xtype: mygrid ,title: My Grid! ,region: center ,...} , {xtype: mygrid ,title: My Menu ,region: north ,...}]});
  29. 29. MVC – ModelLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericModels are the core of data:they are objects, wrapped in Ext.data.Field class/project/app/model/MyGrid.jsExt.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...
  30. 30. ModelLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  31. 31. MVC – StoreLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericStores are arrays of model/project/app/store/MyGrid.jsExt.define (MyApp.store.MyGrid, {extend: Ext.data.Store ,// name of the model classmodel: 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}}});
  32. 32. Data PackageLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  33. 33. MVC – ControllerLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericControllers are the glue between models/stores and views:all the app logic is handled here/project/app/controller/MyGrid.jsExt.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();...}});
  34. 34. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts
  35. 35. ChartsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  36. 36. Charts – DefinitionLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.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
  37. 37. Charts – AxesLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericAxes typesAxis: base classCategory: A type of axis that displays items incategories.Gauge: Gauge Axis is the axis to be used with aGauge series. The Gauge axis displays numericdata from an interval.Numeric: An axis to handle numeric values.Time: A type of axis whose units are measuredin 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 Chartcan display.
  38. 38. Charts – SeriesLicense : Creative Commons (Attribution , Share Alike) 3.0 Genericseries: [{type: line,xField: name,yField: balance}]Series are responsible for the visual representation of the data pointscontained in the Store.SeriesAreaBarCartesianColumnSeries typesGaugeLinePieRadarScatter
  39. 39. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts6. Misc (dafaq?)
  40. 40. UtilitiesLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericNative ExtensionsExt.ArrayExt.ObjectExt.StringExt.JSONExt.FunctionUtilityExt.util.SorterExt.util.SortableExt.util.HashMapExt.util.FilterEventsExt.TaskManagerExt.EventManagerExt.EventObjectExt.util.Observable
  41. 41. ExtLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericThe Ext namespace (global object) encapsulates all classes, singletons, andutility methods provided by Senchas libraries.PropertiesisChromeisSafariisIEisOperaisGeckoisWebKitisLinuxisMacisWindowsMethodscreateeachgetgetCmpgetDomgetStoreisArrayisEmptyisObjectonDocumentReadyonReady
  42. 42. Ext - ExamplesLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericExt.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<div id=”chatlog”>......</div>var cl = Ext.get (chatlog);cl.setVisible (false);Ext.getCmpvar win = Ext.getCmp (win1);
  43. 43. CreditsLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericVincenzo Ferrariwilk3ert@gmail.com

×