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


ExtJs in Google trends
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

Data model structure

Model


  • Fields
  • Proxies
  • Validations
  • Associations
  • Sessions

Model in ExtJs

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'
        });
                        

Sandbox

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

MVC in ExtJs
  • M = model + storage
  • V = viewport + UI components
  • C = classic controller from ExtJs 4

MVVM

MVVM in ExtJs
  • M = model + storage
  • V = viewport + UI components
  • VM = view model

MVVM + VC

MVVM + VC in ExtJs

UI elements


  • View port & layouts
  • Forms
  • Grids
  • Trees
  • Charts

Layouts


Layouts in ExtJs 5
Sandbox

Forms


Form fields in ExtJs 5
Sandbox

Grids


Grids in ExtJs 5
Sandbox

Trees


Trees in ExtJs 5
Sandbox

Charts


Charts in ExtJs 5
Sandbox

Browser support


Charts in ExtJs 5

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


Charts in ExtJs 5

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

Do you have any questions?




Sources:



Sergii Danilov / @pencroff
github.com/Pencroff