Dive into ExtJs 5
Let's talk about new version JavaScript framework Sencha ExtJs 5
Created by Sergii Danilov / @pencroff
What is Sencha ExtJS?
Wikipedia:
«Ext JS is a pure JavaScript application framework for building interactive web applications using techniques such as Ajax,
DHTML and DOM scripting. Originally built as an add-on library extension of YUI by Jack Slocum, Ext JS includes interoperability
with jQuery and Prototype.»
Sencha:
«Ext JS 5 ships with more than 300 classes.
We have more than 2 million developers to date and they come from various backgrounds and locations.»
Popularity ExtJS
Play on Google trends
Features out of the box
Class-based development
Application architecture (Backbone.js, AngularJS, Ember.js)
Data manipulation, like Underscore.js, but more
DOM queries (JQuery, Zepto.js)
UI elements (JQuery UI, Kendo UI)
Charts (Highcharts, Chart.js)
Loader (RequireJs, yepnope.js)
Class-based approach
- Inheritance
- Overriding
- Mixins
- Statics
- Singleton
Inheritance
Ext.define('App.common.proxy.AppRest', {
extend: 'Ext.data.proxy.Rest',
alternateClassName: 'Ext.data.AppRestProxy',
alias: 'proxy.apprest',
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'total'
}
});
Overriding
Ext.define('Jarvus.hotfixes.ext.form.field.Tag.FindRecord', {
override: 'Ext.form.field.Tag',
// compatibility: '5.0.1255',
findRecord: function(field, value) {
return this.getStore().findRecord(field, value);
}
});
New version still has bugs and this feature use for hotfixes
Mixins
// Declaration
Ext.define('CanSing', {
sing: function() {
alert("For he's a jolly good fellow...")
}
});
// Using
Ext.define('Musician', {
mixins: {
canSing: 'CanSing'
},
sing: function() {
// delegate singing operation to mixin
this.mixins.canSing.sing.call(this);
}
})
Statics
Ext.define('Computer', {
statics: {
factory: function(brand) {
/* 'this' in static methods refer to the class itself */
return new this(brand);
}
},
constructor: function(brand) {
this._brand = brand;
}
});
var dellComputer = Computer.factory('Dell');
Singleton
Ext.define('Exceptions', {
singleton: true,
requires: ['Messages'],
onRequestException: function (conn, response, request, eOpts) {
'use strict';
var exceptionInfo = {
Status: response.status + ' - ' + response.statusText,
Description: response.responseText
};
Messages.showException(exceptionInfo);
}
});
Data Package
- Model
- Store
Model
- Fields
- Proxies
- Validations
- Associations
- Sessions
Model example
Ext.define('App.model.PostModel', {
extend: 'Ext.data.Model',
idProperty: '_id',
fields: [
{ name: '_id', type: 'string' },
{ name: 'title', type: 'string' },
{ name: 'created', type: 'date' },
{ name: 'published', type: 'boolean' },
{ name: 'tags', type: 'auto' },
{ name: 'locales', type: 'auto' } // complex type
],
proxy: {
type: 'apprest',
url: '/api/posts'
}
});
Custom type
Ext.define('App.fields.Gender', {
extend: 'Ext.data.field.String',s
alias: 'data.field.gender',
validators: {
type: 'inclusion',
list: [ 'female', 'male' ]
}
});
Proxy
Server side
- Direct
- Ajax
- JsonP
- Rest
Client side
- Memory
- SessionStorage
- LocalStorage
- Sql
Validators
Ext.define('App.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'gender', type: 'gender' }
],
validators: {
// Validator type could be: Presence, Length, Range,
// Format, Inclusion, Exclusion, Email and Custom
name: [
'presence',
{ type: 'length', min: 7 },
{ type: 'exclusion', list: ['Bender'] }
]
}
});
Object validation
var newUser = new App.model.User({
id: 10,
name: 'Bender',
gender: 'robot'
});
// run some validation on the new user we just created
console.log('Is User valid?', newUser.isValid());
Associations
- One to One
- One to Manny
- Many to Manny
Association example
Ext.define('App.model.Person', {
extend: 'App.model.Base',
fields: [ 'name' ],
hasMany: 'Order' // the "entityName" for "App.model.Order" (see below)
});
Ext.define('App.model.Order', {
extend: 'App.model.Base',
fields: [ 'name' ],
hasMany: 'OrderItem'
});
Store
- Model
- Proxies
- Filter
- Grouper
- Sorter
Store example
Ext.define('App.model.PostStore', {
extend: 'Ext.data.Store',
model: 'App.model.PostModel',
storeId: 'PostStore',
autoLoad: true,
pageSize: 20,
proxy: {
type: 'apprest',
url: '/api/posts'
},
listeners: {
load: 'onStoreLoad'
}
});
Application architecture
MVC
or
MVVM
What is better?
MVC
- M = model + storage
- V = viewport + UI components
- C = classic controller from ExtJs 4
MVVM
- M = model + storage
- V = viewport + UI components
- VM = view model
MVVM + VC
UI elements
- View port & layouts
- Forms
- Grids
- Trees
- Charts
Layouts
Sandbox
Forms
Sandbox
Grids
Sandbox
Trees
Sandbox
Charts
Sandbox
Browser support
Router
Ext.define('App.root.RootCtrl', {
extend: 'Ext.app.ViewController',
routes : {
':area/:verb/:id' : {
action: 'onNavigateDetails',
before: 'beforeNavigateDetails'
}
},
onNavigateDetails: function (area, verb, id) {
// update viewport by route parameters
},
beforeNavigateDetails: function (area, verb, id, action) {
// validate route parameters
if (verb !== 'add' && verb !== 'edit') this.redirectTo('404');
action.resume();
}
});
Loader
Ext.Loader.setConfig({
disableCaching: false, // Disable _dc parameter
enabled: true, // dynamic dependency loading
paths: {
'Global': 'src/common/Global.js',
'Messages': 'src/common/Messages.js',
'Exceptions': 'src/common/Exceptions.js',
'Request': 'src/common/Request.js',
'App.common.proxy.AppRest': 'src/common/AppRestProxy.js'
}
});
Sencha CMD
Pros and Cons
+
- All in one and available out of the box
- High speed development
- Cross-browser compatibility
- Support tablets and touch-screens
- The extensibility of components
- JS optimization for deployment
- Theming
- Hidden HTML
-
- It is not free ($3,225.00 for 5 licences)
- Enterprise orientation
- Large size of js files (565 kb minified and zipped)
- Hidden HTML
