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

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. Provided
Familiar and simple to learn (cool documentation)
Fast to develop
Easy to debug
Painless to deploy
Well-organized (powerful mvc architecture)
Extensible (plugin support)
Maintanable
License : Creative Commons (Attribution , Share Alike) 3.0 Generic

4. Widget
Grids Drag&Drop QuickTips
Charts Toolbars and Menus Progress Bar
Tabs ComboBox Buttons
Windows Data View Spotlight
Trees Forms Slider
Layout Managers Text Editors
Drawing Panels
License : Creative Commons (Attribution , Share Alike) 3.0 Generic

5. Widget - Grids
License : Creative Commons (Attribution , Share Alike) 3.0 Generic

6. Widget - Charts
License : Creative Commons (Attribution , Share Alike) 3.0 Generic

7. Widget - Tabs
License : Creative Commons (Attribution , Share Alike) 3.0 Generic

8. Widget - Windows
License : Creative Commons (Attribution , Share Alike) 3.0 Generic

9. Widget - Trees
License : Creative Commons (Attribution , Share Alike) 3.0 Generic

10. Widget - Menus
License : Creative Commons (Attribution , Share Alike) 3.0 Generic

11. Widget - Toolbars
License : Creative Commons (Attribution , Share Alike) 3.0 Generic

12. Widget - Forms
License : Creative Commons (Attribution , Share Alike) 3.0 Generic

13. Base
Class System Application Architecture
Ext Ext.app.Application
Ext.Base Ext.app.Controller
Ext.Class Ext.ModelManager
Ext.Loader Ext.state.CookieProvider
DOM & 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. View
Containers & 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. Components
Form 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.View
Toolbar 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. Data
Models 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.LocalStorage
Stores 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 Package
License : Creative Commons (Attribution , Share Alike) 3.0 Generic

18. Model
License : Creative Commons (Attribution , Share Alike) 3.0 Generic

19. Utilities
Native 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. Ext
The Ext namespace (global object) encapsulates all classes, singletons, and
utility methods provided by Sencha's 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 - Examples
Ext.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 1
Basic 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 2
Inheritance 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 3
Statics
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.Loader
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 Loading
Advantages
Cross-domain Hybrid Solution?
No web server needed Yes, we can!
Best possible debugging
Disadvantages
Dependencies need to be specified before-hand
Synchronous Loading on Demand
Advantages
There's no need to specify dependencies before-hand
Disadvantages
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. Requirements
Web 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 Architecture
Ext JS 4 comes with a new application architecture that not only organizes
your code but reduces the amount you have to write.
Model
Is 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.
View
Is any type of component - grids, trees and panels are all views.
Controllers
Are 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.
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 WebApp
What 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.com
License : Creative Commons (Attribution , Share Alike) 3.0 Generic