This is my second presentation for ExtJs Private Learning. Please see my first presentation here : http://www.slideshare.net/IrfanMaulana21/sencha-ext-js-overview-part-1-layout-and-container-in-extjs

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

2. MVC & MVVM
MVC (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.

3. MODEL
Model 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 usage
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'alive', type: 'boolean'}
]
});

4. STORE
The 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 usage
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
});

5. MODEL AND STORE
One 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.

6. VIEW
View is component that will be shown to user.
View can be some container or component like grid, panel, combo, window, etc.
// sample usage
Ext.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()
});

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

8. VIEW CONTROLLER
Only for ExtJs 5 above.
Every view has single controller that listen even from view.
This will be more modular and manageable view.
// sample usage
Ext.define('MyApp.view.foo.FooController', {
extend: 'Ext.app.ViewController',
alias: 'controller.foo',
onBarChange: function (barTextField) {
// called by 'change' event
}
});

9. VIEW MODEL
The 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 usage
Ext.define('MyApp.view.TestViewModel2', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test2',
formulas: {
x2: function (get) {
return get('x') * 2;
}
}
});

10. CONFIG CLASS
Config class is used for avoid too much global variable usage.
It's give you getter-setter behavior like Java done.
// sample usage
Ext.define('TEST.config.GlobalVariable',{
singleton : true,
config : {
isNewDashlite : true,
dashliteObject : null,
},
constructor : function(config){
this.initConfig(config);
}
});

11. 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.js
Ext.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
});
}
});

12. 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 controller
Ext.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({
});
}
});

13. 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 mainView
Ext.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',}]
});

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

15. Contact me on :
Email : mazipanneh@gmail.com
Blog : mazipanneh.wordpress.com
Thanks for your attention.
Presented by : Irfan Maulana