Tuesday, November 15, 2011

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.




9 comments:

  1. Thanks for the article! I just started to write a simple sencha touch app, and had an issue to load my viewport.

    ReplyDelete
  2. ver simple and nice explanation ,thanks

    ReplyDelete
  3. Thank you sir. Just were getting a bit angry about the Sencha Touch 2.0 docs and examples as they seem to be not consistent yet. You helped a lot there. I wonder why this info is not placed somewhere prominent within the original docs.

    Cheers

    ReplyDelete
  4. Can U suggest me Any good tutorial for MVC programming in Sencha touch 2

    ReplyDelete
  5. Sencha touch 2 is still in developer preview so there aren't any tutorial available yet. All you can do is trial and error.

    ReplyDelete
  6. Hi..Hiren, this article helps me a lot! Thank you so much,
    It would be great help if you can provide me a complete example of sencha touch2, i'm finding trouble in 'navigate through the views',

    Thanks in advance !

    ReplyDelete
  7. Really nice and short but very informative article, i have just started with Sencha touch 2.0 was stuck for wuite a long time.There are very few articles available on the internet which show the true difference between Sencha touch 1.0 and 2.0 and yours is definitely one of them.Please continue writing such articles for newbies like me

    ReplyDelete