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 from one 'screen' to the next using the controller.

There's a "record" property associated with a number of the Sencha widgets --indicating the currently selected record in an Ext.list for instance-- and for some reason I can't quite get there as to how to pass something like that from an Ext.Panel to another one.

For instance, I have an Ext.Panel with data in it from an Ext.Store, including an address. I have another Ext.Panel that will show a map. I need to pass this address to the map's panel, but am not sure how. Here's what I'm trying from the first panel:

                listeners: {
                'tap': function () {
                    Ext.dispatch({
                        controller: app.controllers.establishments,
                        action: 'showMap',
                        id: record.getId(),
                        data: record.data
                    });
                }

I'm floundering a bit as you can see, trying to use both an 'id' and 'data' config option in the controller in an attempt to get data to the map panel, by any means necessary.

I don't necessarily need a answer for this specific problem, but if you had suggestions on how to do this in general-- basically, best practices for passing data from one screen to the next.

If it helps, I'm basing my app's structure on a nice MVC tutorial by Mr. Pearce at Sencha:

http://www.sencha.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_PhoneGap

Thanks much!

Answer 1

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 2

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