Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]

Sencha ExtJs Learning[part

2]

MVC And MVVM Architecture in ExtJsby Irfan Maulana

MVC & MVVMMVC (Model-View-Controller) is used by ExtJs 4.x.x or below version.MVVM (Model-View-ViewModel) is used by ExtJs from version 5.

The key of different is ViewModel that used for data binding system.

MODELModel is like structure of table in Databases.Model represent data-index and type of data will be shown.Model normally used in store to provide data.

// sample usageExt.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'name', type: 'string'}, {name: 'age', type: 'int'}, {name: 'phone', type: 'string'}, {name: 'alive', type: 'boolean'} ]});

STOREThe Store class encapsulates a client side cache of Model objects. Stores load data via a Proxy, and also provide functions for sorting, filtering and querying the model instances contained within it.// sample usagevar myStore = Ext.create('Ext.data.Store', { model: 'User', autoLoad: true, proxy: { type: 'ajax', url: '/users.json', reader: { type: 'json', root: 'users' } }, });

MODEL AND STOREOne instance of model can be used by many store as you need.This will not affect to your data.But when you use one store for many component, this will affect to your data.When data store changed, will be affected to all component that used it.But for some reason you will need this behavior, do as you need.

VIEWView is component that will be shown to user.View can be some container or component like grid, panel, combo, window, etc.// sample usageExt.create('Ext.grid.Panel', { title: 'Simpsons', store: Ext.data.StoreManager.lookup('simpsonsStore'), columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone' } ], height: 200, width: 400, renderTo: Ext.getBody()});

CONTROLLERController is application controller.Include Global Model, Global Store, and Global View registration here. for private Model, Store and View use requires.this will only loaded when needed.Controller is listen for events (usually from views) and take some action (in ExtJs 5 move to ViewController).// sample usage Ext.define('MyApp.controller.Users', { extend: 'Ext.app.Controller', init: function() { } });

VIEW CONTROLLEROnly for ExtJs 5 above.Every view has single controller that listen even from view.This will be more modular and manageable view.

// sample usageExt.define('MyApp.view.foo.FooController', { extend: 'Ext.app.ViewController', alias: 'controller.foo', onBarChange: function (barTextField) { // called by 'change' event }});

VIEW MODELThe ViewModel is a class that manages data specific to the View.It allows interested components to bind to it and be updated whenever this data changes.

// sample usageExt.define('MyApp.view.TestViewModel2', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.test2', formulas: { x2: function (get) { return get('x') * 2; } }});

CONFIG CLASSConfig class is used for avoid too much global variable usage.It's give you getter-setter behavior like Java done.

// sample usageExt.define('TEST.config.GlobalVariable',{ singleton : true, config : { isNewDashlite : true, dashliteObject : null, }, constructor : function(config){ this.initConfig(config); }});

HOW YOUR ARCHITECTURE WORK ?

+ Fisrt app.js will call Application.js (when use senchaCmd: config here).

+ in Application.js you defined mainController and mainView can be launch here.

// sample Application.jsExt.define('TNMD.Application', { extend: 'Ext.app.Application', name: 'TNMD', requires : ['TNMD.config.GlobalVariable'], // this is our cofig class. please see my example config.class controllers: [ 'AppController'], // this is our mainController launch: function () { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ xtype: 'mainView' }] // this is our mainView }); }});

HOW YOUR ARCHITECTURE WORK ?

+ Make your controller to load mainView. (just one view, other view using requires)

+ You can include model and store here, but dont use autoload:true for your store.

+ Using manual load is more safety, except data for combo.// sample controllerExt.define('TNMD.controller.AppController', { extend: 'Ext.app.Controller', models: [], //global model stores: [], views : ['TNMD.view.MainView' ], // this is our mainView. when you include here will autoload. init: function() { this.control({ }); }});

HOW YOUR ARCHITECTURE WORK ?

+ Make your controller to load mainView. (just one view, other view using requires)

+ You can include model and store here, but dont use autoload:true for your store.

+ Using manual load is more safety, except data for combo.// sample mainViewExt.define('TNMD.view.MainView', { extend: 'Ext.container.Container', xtype: 'mainView', itemId: 'mainView', requires: [ 'TNMD.viewController.MainController', 'TNMD.view.FilterPanel', 'TNMD.view.ContentPanel'], controller: 'mainController', //this is our view Controller layout : 'border', listeners:{afterrender: ‘onAfterRender’} //call event in ViewController items:[{xtype : 'filterPanel', region : 'west', width : 250,},

{xtype : 'contentPanel', region : 'center',}] });

HOW YOUR ARCHITECTURE WORK ?

+ Listing all event from view in viewController. // sample of mainViewControllerExt.define('TNMD.viewController.MainController', { extend: 'Ext.app.ViewController', alias: 'controller.mainController', onAfterRender: function(){ alert(“call after render”); }});

Contact me on :

Email : mazipanneh@gmail.comBlog : mazipanneh.wordpress.com

Thanks for your attention.Presented by : Irfan Maulana