ExtJS: a powerful Javascript framework

1,915 views

Published on

An introduction to one of the best Javascript framework I ever used.

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

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

No notes for slide

ExtJS: a powerful Javascript framework

  1. 1. A powerful javascript framework by Vincenzo Ferrari License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  2. 2. License Open Source License (GPLv3) Commercial Software License More info at http://www.sencha.com/products/extjs/license/License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  3. 3. ProvidedFamiliar and simple to learn (cool documentation)Fast to developEasy to debugPainless to deployWell-organized (powerful mvc architecture)Extensible (plugin support)Maintanable License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  4. 4. WidgetGrids Drag&Drop QuickTipsCharts Toolbars and Menus Progress BarTabs ComboBox ButtonsWindows Data View SpotlightTrees Forms SliderLayout Managers Text EditorsDrawing Panels License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  5. 5. Widget - GridsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  6. 6. Widget - ChartsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  7. 7. Widget - TabsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  8. 8. Widget - WindowsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  9. 9. Widget - TreesLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  10. 10. Widget - MenusLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  11. 11. Widget - ToolbarsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  12. 12. Widget - FormsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  13. 13. BaseClass System Application Architecture Ext Ext.app.Application Ext.Base Ext.app.Controller Ext.Class Ext.ModelManager Ext.Loader Ext.state.CookieProviderDOM & 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 License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  14. 14. ViewContainers & 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 License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  15. 15. ComponentsForm 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.ViewToolbar 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 License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  16. 16. DataModels 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.LocalStorageStores 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 License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  17. 17. Data PackageLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  18. 18. ModelLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  19. 19. UtilitiesNative 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 License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  20. 20. ExtThe Ext namespace (global object) encapsulates all classes, singletons, andutility methods provided by Senchas libraries. Properties Methods isChrome create isSafari each isIE get isOpera getCmp isGecko getDom isWebKit getStore isLinux isArray isMac isEmpty isWindows isObject onDocumentReady onReady License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  21. 21. Ext - ExamplesExt.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); License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  22. 22. 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}, …}); License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  23. 23. Ext.Class – Example 1Basic 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; } } }); } }); License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  24. 24. Ext.Class – Example 2Inheritance 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 (); }); } }); License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  25. 25. Ext.Class – Example 3Statics 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; } }); License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  26. 26. Ext.LoaderExt.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 LoadingAdvantages Cross-domain Hybrid Solution? No web server needed Yes, we can! Best possible debuggingDisadvantages Dependencies need to be specified before-handSynchronous Loading on DemandAdvantages Theres no need to specify dependencies before-handDisadvantages Not as good debugging experience Must be from the same domain due to XHR restriction Need a web server License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  27. 27. RequirementsWeb 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 License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  28. 28. MVC ArchitectureExt 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. License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  29. 29. Enough!Ok, you showed us what you know: great, you did your homework! Now we want to see some code! License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  30. 30. Build my WebAppWhat 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/ License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  31. 31. Credits Vincenzo Ferrari wilk3ert@gmail.comLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic

×