Sencha Touch MVC — recommended ways of passing data through the controller?

Question

I\'m using Sencha Touch for a mobile app and am using the MVC functionality in it. I like Sencha quite a bit but I\'m having a little trouble when it comes to passing data

Answer 1

I am not too familiar with this MVC pattern but I have a lot of experience with ExtJS and in my opinion the best way for components to communicate is with events. In your example you would create an event on the Panel like 'addAddress' and the Map would listen for that event. And when the address was set in the panel you would call.

this.addEvent('addAddress');

this.fireEvent('addAddress', this, address);

and the map would have a listener like

onAddress: function(panel, address) {
   // do something with the address
}

and in your top level app you would add the listener.

app.mon(panel, 'addAddress', map.onAddress, this);

Typically it's best for your components together this way so that the Panel isn't dependent on the Map and vice-versa

Answer 2

Answering a very old question, I suppose with the current versions of Sencha touch (2.2+) we have an alternate method, which I kind of prefer. Here it is for your evaluation.

Alternative is to use the routes feature of the controllers.

NOTE: Ext.Dispatch is deprecated in Sencha Touch 2.2, if you still want to use the dispatch method you need get the controller and call the method on it as explained here. How to pass data among the screens in sencha touch2.0?

First you define the routes a controller is interested in.

Ext.define('My.controller.Profile', {
extend: 'Ext.app.Controller'
,config: {
    routes: {
        'products/:id': 'showProduct'
    }
}
,showProduct: function(id) {
    console.log('Load and Show product... ' + id);
}

});

Next you create a link which has a url of this format as the href:

<a href="#products/1234">View Product</a>

Clicking the link will invoke the Product controllers showProduct method with id set to 1234.

Or if you wish to do this programmatically you could write:

location.hash = "products/1234";

which will have the same effect.

I think this is kind of clean, loosely coupled and has less dependency of framework internals. Open for ideas. :)

Answer 3

I think you're on the right track with Ext.Dispatch. The parameters you add in the Dispatch options object are passed to the action method on the controller.

E.g.

showMap: function(options){ 
               var id = options.id; 
               //load data based on the id and pass it to your map
               ...
         }

I also think you should set the historyUrl on the Dispatch options object so that if they refresh the page the id will still get sent to the controller action.

Answer 4

A better solution might be restructure your MVC to eliminate the need to pass records around different views. For example, making different view component share the same store, whose reference is made accessible from anywhere needed.

Usually I'd put the reference of stores used across different views in locations such as App.controllers.data nor directly under App (which is really just part of controller anyway).