Your SlideShare is downloading. ×
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript framework
ExtJS: a powerful Javascript 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: a powerful Javascript framework

1,334

Published on

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

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,334
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
131
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. A powerful javascript framework by Vincenzo Ferrari License : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 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. 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. 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. Widget - GridsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 6. Widget - ChartsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 7. Widget - TabsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 8. Widget - WindowsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 9. Widget - TreesLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 10. Widget - MenusLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 11. Widget - ToolbarsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 12. Widget - FormsLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 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. 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. 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. 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. Data PackageLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 18. ModelLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Credits Vincenzo Ferrari wilk3ert@gmail.comLicense : Creative Commons (Attribution , Share Alike) 3.0 Generic

×