15
Sencha ExtJs Learning[part 2] MVC And MVVM Architecture in ExtJs by Irfan Maulana

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

Embed Size (px)

Citation preview

Page 1: 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

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

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.

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

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

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

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

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

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.

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

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

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

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() { } });

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

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

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

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

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

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

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

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

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

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({ }); }});

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

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

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

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

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

Contact me on :

Email : [email protected] : mazipanneh.wordpress.com

Thanks for your attention.Presented by : Irfan Maulana