Sencha Touch 2.0 MVC in 5 minutes or less

Sencha Touch 2.0 MVC in 5 minutes or less

21 October 2011 16 Comments

I’ve shied away from JS frameworks on the mobile platform primarily due to performance. I had not been able to find one that came close to native performance on Android. This changed last weekend when I tried out the Sencha Touch 2.0 dev preview. Performance is vastly improved over Touch 1.0. Animations and transitions are smooth, even on my Android 2.2 device and I was able to get up and running very fast.

Grab the Sencha Touch 2.0 Dev Preview here: http://www.sencha.com/blog/sencha-touch-2-developer-preview/

While I was able to get a basic app up and running quickly, unfortunately I spent a lot of time re-factoring into a proper MVC structure. The documentation on how to do this in Touch 2.0 is not there yet and there are some albeit small but killer differences between Touch1.0 and 2.0. To a novice like me they cost me a few hours.

Everything here was based off the Sencha ExtJS 4.0 walkthrough available here:

• http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/
• http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/
• http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3/

The sample code is available on Github and you can go here and download the entire project in a single ZIP/TAR: https://github.com/FrancisShanahan/SenchaTouch2MVCHelloworld

Or you can fork the repo using git: http://help.github.com/fork-a-repo/

Here are a few key points:

a) Let the app instantiate your controllers and any global stores your app needs. Notice how the initial layout is created using xtypes? These are created as aliases in the views.

     
     

      
      
     
     
// Main application entry point
Ext.application({
phoneStartupScreen: 'images/sencha_logo.png',
name: 'HelloWorld',
        // the controller will take care of creating the view
controllers: ['Home'],
launch: function() {
console.log('app launch');
var carousel = Ext.create('Ext.Carousel', {
fullscreen: true,
// clean instantiation using the widget.alias's defined
                    // in each view
items: [{ xtype: 'home' },
{ xtype: 'simplelist' }]
});
    }
});

view raw App.js This Gist brought to you by GitHub.

b) Let your controllers instantiate your views and stores.

Ext.define('HelloWorld.controller.Home', {
    extend: 'Ext.app.Controller',
    views: ['Home', 'SimpleList'],
    stores: ['Stations'],
   
... rest of the code goes here
});

view raw sampleController.js This Gist brought to you by GitHub.

c) Use Component Queries instead of Ext.getCmp(‘id goes here’). This’ll keep your code more manageable as the code base grows. Note, the “ref” name here is important as it’s used to generate getters for the view instances. E.g. a ref of “stationList” will create a getter on the controller of “getStationList”.

... this goes in your controller...
    // These "refs" will generate "getters" for each of the view component instances
    // e.g. getBottomField and getStationList
refs: [{
selector: 'carousel > panel > #bottomInput',
ref: 'bottomField'
},
            {
            selector: 'carousel > list',
            ref: 'stationList'
            }
    ],
   
... rest of the code goes here....
});

view raw componentquery.js This Gist brought to you by GitHub.

I’ve already heard from a few folks so it looks like this project is helpful. It’s also ready for dropping into a Phonegap shell. Fork it and update or let me know if there’s anything you’d like to see added.

Attribution: Today’s photo comes from Anxo Resúa’s stream on Flickr http://www.flickr.com/photos/anxoresua/4652943076/