Your SlideShare is downloading. ×
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
ExtJS framework
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ExtJS framework

1,011

Published on

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

No Downloads
Views
Total Views
1,011
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
74
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. License : Creative Commons (Attribution , Share Alike) 3.0 GenericA powerful javascript frameworkbyVincenzo Ferrari
  • 2. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts
  • 3. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts
  • 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. 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. 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. 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. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts
  • 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. 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. 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. 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. 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. 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. 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. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts
  • 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. 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. 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. 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. 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. 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. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts
  • 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. MVC – Folder TreeLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericFile Structure/var/www/index.htmlapp.jsext/app/controller/model/store/view/
  • 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. 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. 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. 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. ModelLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 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. Data PackageLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 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. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts
  • 35. ChartsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 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. 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. 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. IndexLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic1. Loader2. Class System3. Design Patterns4. MVC5. Charts6. Misc (dafaq?)
  • 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. 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. 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. CreditsLicense : Creative Commons (Attribution , Share Alike) 3.0 GenericVincenzo Ferrariwilk3ert@gmail.com

×