Sencha touch 2 and MVC

Recently I switched to sencha touch 2 and I had to struggle little bit to implement MVC in it. So I am writing this blog post so that it will be useful for others.

Old way (sencha touch 1.0)


In sencha touch 1.0 we normally create object of viewport in application launch function as follow.


Ext.regApplication({
    name: "myApp",
    defaultTarget: "viewport",
    launch: function () {
        this.viewport = new myApp.Viewport({
            application: this
        });
    }
});

This will create an viewport object and render other items in viewport. So what is so different in sencha touch 2.0. It's totally different than it's older version. Following are the major changes.

1) Dynamic loading of scripts


Now you don't need to link all your JavaScript files in index file as it will be dynamically loaded from controllers. So you must set loader config in app.js file as follow.


Ext.Loader.setConfig({
enabled: true
});

2) Rendering viewport


Now you don't need to create viewport object explicitly in app launch function but it will be automatically created if you set autoCreateViewport to true in application definition. See the following code.


Ext.application({
    name: 'myApp',
    autoCreateViewport : true
});


If you set autoCreateViewport to true, app will try to load Viewport.js file from app/view/ folder. So you  must place a file there. This file will define your viewport. In this file you must specify a class which extends panel or container with fullscreen set to true.

Please remember you can extend Ext.viewport.Viewport or Ext.container.Viewport as it's singleton classes and can not extended. Whatever class you define here in Viewport.js file, it's object will be automatically instantiated and that control will be added to viewport. So here you only need to specify class with fullscreen set to true .Check the following code.

Ext.define('myApp.view.Viewport', {
    extend: 'Ext.Panel',

    requires: [
        'Ext.Panel'
    ],
    config: {
        fullscreen: true,
        layout: {
            type: 'card',
            align: 'stretch'
        },
        defaults: {
            flex: 1
        },
        items: [{
            xtype : 'panel',
            html : 'Welcome to Sencah Touch 2.0'
        }]
    }
}); 

Hope this will help you.