Sencha Touch MVC Best Practices

问题:

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?

回答1:

I suggest making your controllers view-aware. When a controller receives a dispatch event you should have something similar to the following:

this.controllerViewOne = this.controllerViewOne
                         || this.render({
                                 xtype: 'panel',
                                 listeners: {
                                      onMajorUIAction : function(params){
                                           Ext.Dispatch({ 
                                                controller : 'ProperController',
                                                action     : 'ProperAction',
                                                historyUrl : 'ProperHistoryUrl',
                                                params : params
                                           });
                                      }
                                 }
                            });

This has the added benefit of having all of the "Main" listeners for each of the controllers views in one space. It also means reusing the views for other controllers becomes easier.

Your views should all have listeners that help abstract the complexities of the individual components and their events / listeners.

I use an UI manager for global UI changes like hiding / showing a main toolbar or displaying a back button.

回答2:

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