Lions, Tigers, Bears and Controllers

Ok, so next week I begin my Sencha Touch Class, but right now I have only this forum.

Controllers. I want to get some informed opinions and knowledge. In the Sencha Framework zoo, Controllers seem to stand out in the hierarchy. And I think I just ran into my first Framework/design problem.

Code:

Ext.define('AEGMobile.controller.WellController', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            wellList: '#wellList',
            WellNavigation: 'wellnavigation',
            WellTestPanel: '#welltestpanel'
        },

        control: {
            "list": {
                itemtap: 'onListItemTap'
            }
        }
    },

    onListItemTap: function(dataview, index, target, record, e, eOpts) {
        var map,
                info,
                details,
                mainNav,
                wellBoreID;

            if (record) {
                details = this.getWellTestPanel();
                if (!details) {
                    details = Ext.create('AEGMobile.view.WellTestPanel', {title: 'Well Tests'});
                }
                wellBoreID = record.data.wellBoreID;
                Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading Well Tests...' });
                var store = Ext.data.StoreManager.lookup('WellTestJSONStore');
                store.getProxy().setUrl('http://services:8080/WellTest/service/welltest/wellbore/'+wellBoreID);
                store.load();
                mainNav = this.getWellNavigation();
                mainNav.push(details);
                Ext.Viewport.setMasked(false);
            }
    },

    launch: function() {
                var me = this;
                Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading Well List...' });
                me.getWellList(
                                function (store){me.getWellList().setStore(store);}
                               );
                Ext.Viewport.setMasked(false);
    },

    getWellList: function() {
                var store = Ext.data.StoreManager.lookup('WellListStore');
                store.getProxy().setUrl('http://ift.tt/X7BOOQ');
                store.load();
    },

    getWellTest: function(WellBoreID) {

    }

});

The above code expects that I will click on the Well List, determine that a record is valid and was clicked on. Then I check to see if the details container is in memory (more on this later). If it is, it shouldn't create another one, but use the one in memory (but it does). I then get my wellBoreID from the tapped list, and concatenate it to my service call, then load the Store.

So here is the behavior because of the above code...

1. When I click on the Well List (this is the WellListController), the details variable is a local, so it's always going to create a new Container. This is why if I click twice, I have 2 containers created and then I have to use the back button twice to get back to the Well list and pick another well.

2. Once I have the Well Tests displayed for the selected well, if I click on the Grid that displays the well test, this method fires again and basically makes a copy of the same container. As long as I keep clicking on the Grid, this occurs.

Here is my understanding of the issue...

I now understand that visually, I may be clicking on another "page", when I select the Data grid, but that controller action for getting the WellBoreID (onListItemTap) is the method that will be fired whenever any list is selected. The fact that I have not used an "Instance" scoped Variable for the Container I am pushing onto the View Stack of Objects is why I keep getting duplicates added to the ViewPort.

So my question is simply, given the pseudo code below, what would be the best practices approach to achieving a singleton-like behavior from this master/detail view?

1. List Item is clicked - Find the WellTestPanel if it's in memory, either delete it, or pop it off the ViewStack, or reuse it without creating a copy.

2. Grid Item is clicked - I really just want to focus on the intersection of the Grid (a cell) that was clicked on, but the WellTestPanel, is now under the direct control of the WellList Controller.

I believe I need to do the following in the WellController::onListItemTap event...

1. Create a new WellTestController if one does not exist

2. Fire a method within that new controller that has either the record as an argument, or it has the WellBoreID as an Argument.

3. Use the new controller exclusively for the pushing the WellTestPanel onto the ViewStack.

I'm not sure if this is a viable design, given the MVC coding that is somewhat enforced through the Framework. Is it wise to instantiate other controllers within that reference other Controllers, or should I begin to fire events that create other Controllers, and then take it from there? Will this mess with the history portion of the Framework?

And finally, is there an up-to-date discussion about how best to accomplish Controller to controller hand-offs like these? In FLEX I would have used an EventBus as a singleton and routed all my actions through events to the proper listeners. Is that what I should design for with the Touch Framework?

Thank you for your replies...

Curtis Fisher

Lions, Tigers, Bears and Controllers