View & store loaded before controller's init

Question

I am building Sencha touch 2.1 application.

In my application I have one global variable which keeps reference of my controller class. This reference is used to execute a controller function on load of one of the store but the problem comes when I deploy this on slow remote server and store's load is fired before this global variable gets reference of controller object. To provide this reference before store's load I tried putting initialization logic in controllers init method

init : function(){
    bossController = this.getApplication().getController('Boss');
},

in init method of controller but view & store are loaded before this init is called and hence I get this error:

Cannot call method 'loadMagazines' of undefined 

This is my on load listener in store:

listeners:{
        load: function( me, records, successful, operation, eOpts ){ 
            bossController.loadMagazines(this, records);
        }
}

I tried initializing this variable in app.js launch() method instead of controller's init method but that also didn't work.

Please note both approaches works fine when I put my code in local apache and access it using my chrome browser but they doesn't work when I put it on slow remote server.

EDIT

This is how application flow happens 0. All the models, views, stores & controllers are defined in app.js

1. Launch function in app.js add main view to the viewport.

2. Main view creates magazine view and add it to itself.

3. In initialize method of magazine view, store is crated and loaded.

4. In load listener of store, controller is used.

This is my view:

Ext.define('myshop.view.MagazinePanel', {
extend : 'Ext.Panel',
requires : [ 
    'myshop.model.MagazinePage',
    'myshop.store.MagazineStore',
    'Ext.XTemplate',
    'Ext.data.Store'
],
alias : 'widget.magazinepanelview',
xtype : 'magazinepanelview',
config : {
    layout : 'hbox',
    id : 'hc',
    scrollable: 'horizontal',
    directionLock : true,
    masked: {
        xtype: 'loadmask',
        message: 'Loading'
    },
inline: {
        wrap: false
    },
    items : [{
        xtype : 'panel',
        html : ''
    }]
},
initialize: function() {
    var me = this;
    var myStore = Ext.create('myshop.store.MagazineStore');
        myStore.load({
            callback: function(records, operation, success) {
                me.setMasked(false);
            },
            scope: this
        });
    this.callParent();
}
});

and this is the store:

Ext.define('myshop.store.MagazineStore',{
extend:'Ext.data.Store',
requires: [
           'myshop.model.MagazinePage',
           'Ext.data.proxy.JsonP'
       ],
config:{
    storeId : 'ms',
    model:'myshop.model.MagazinePage',
    autoLoad :false,
    pageSize: 30,
    proxy : {
        type: 'jsonp',
        url: Properties.PORTAL_SERVICE_BASE_URL+'test/categories/list',
        callbackKey: 'callback',
        startParam: false, //to remove param "start" and making it constant
        extraParams: {
            start : 0,
            _type : 'json'
        },
        reader: {
            type: 'json',
            rootProperty: 'categories.data',
            totalProperty: 'categories.status.totalCount'
        }
    },
    listeners:{
        load: function( me, records, successful, operation, eOpts ){ 
            bossController.loadMagazines(this, records);
        }
    }
}
});

Answer 1

Loading data should do controller but not view.

   Ext.define("myshop.controller.Boss", {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            magazinePanel: '#hc'
        },
        control: {
            magazinePanel: {
                initialize: 'initializeMagazinePanel'
            }
        }
    },

    initializeMagazinePanel: function() {
        var me = this;
        var myStore = Ext.create('myshop.store.MagazineStore', {
            listeners:{
                scope: this,
                load: this.onMagazineStoreLoad
            }
        });
        myStore.load();
    },

    onMagazineStoreLoad: function(me, records, successful, operation, eOpts) {
        this.getMagazinePanel().setMasked(false);
        this.loadMagazines(records)
    },

    loadMagazines: function(records) {
    }
});

Answer 2

There are some parts missing in your example code so just a hint/guess. I guess your store has autoLoad property to true and get's therefore loaded as soon as it gets initialized. Turn it of and try something like this.

init : function(){
    bossController = this.getApplication().getController('Boss'); // bossController where is this var defined? 
    // fire a ready event
    // or
    Ext.StoreMgr.lookup('YourStoreName').load();
}

Or provide more information about the store, who loads it, when it is loaded and in which scope.

Answer 3

Couldn't you put your loadMagazines function in the success callback of an explicit load() function in your controller, and disable autoLoad as @sra suggests?

Something like:

//in controller
init: function() {
    myStore.load({
        callback: function(recs, op, success) {
            // do the load magazines thing
        }
    })
}

Answer 4

I am curious if what I suggested here: getController() doesn't load file and doesn't fire init and lauch helps with this too. You can remove the view and store from app.js and put it in the controller itself. I think that should make the view and store be defined only after the controller is defined.