Sencha Touch MVC Best Practices

Question

I'm trying to wrap my mind around the MVC framework of Sencha Touch, but I'm finding a couple of different approaches. In one, found here, there is an approach to structuring Sencha Touch apps presented at SenchaCon 2010. It has the added weight of being by a Sencha Touch employee, but it is several months old. In other, more recent posts on Sencha Touch MVC, they have tutorials (such as here, as well as Manning's MEAP Sencha In Action by Jay Garcia) that seem to rely on Ext.Dispatch in the views to call specific controller methods, passing additional elements to the controller, which makes the views controller-aware.

My question is, which is considered the best practice to structure a Sench Touch MVC app?

Answer 1

I had similar questions. Sencha automates a lot of getter creation for your view component instances. It's very confusing.

I've taken Sencha Touch 2.0 and put together a complete MVC scaffold application as an example. I've based it off the ExtJS 4.0 MVC architecture. This will work out of the box with the Sencha Touch 2.0 Developer Preview and should save you a tonne of time.

https://github.com/FrancisShanahan/SenchaTouch2MVCHelloworld

To answer your specific question, the latest ExtJS 4.0 MVC architecture sets up listeners to instances of view components within the init event of the controller. Here's an example taken from the github project already linked:

Ext.define('HelloWorld.controller.Home', {
    extend: 'Ext.app.Controller',   
    views: ['Home', 'SimpleList'],
    .. etc... 
    init: function() {
        // Start listening for events on views
        this.control({
                 // example of listening to *all* button taps
                 'button': { 'tap': function () {
            console.log('Every button says Hello world');
        } 
    ...

Let me know if it helps, regards, -fs