Dynamic Proxy URL for store.load() in MVC architecture with Ext JS

Question

I want to change the proxy of a store before (!) it is loaded. The specific problem in this case is that I do not find the right moment, when to load.

In detail:

I have created a MVC-model by creating a view, a controller, a model, and a store as defined by EXTJS4 architecture. The view is a grid panel. It defines the store within its own define statement:

Ext.define('P.view.MyView' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.MyView',
    ...
    store: 'MyStore',
    ...
}

When I load the store with "autoload:true" everything works fine, but of course the proxy is then static as defined in the code. When I do not use "autoload" and try to set "extraParams" and the load the store in the "initComponent" of my view like:

initComponent: function() {
    ...
    this.store.load();    
    ....

I get an error: Object "MyStore" has no method 'load'.

How should I do it?

Answer 1

When you call this.store.load() in initComponent the store is not initialized yet. The property this.store is string at the moment of calling. You have to call for loading after your widget's parent initComponent (where the store initialization is happening) was called:

initComponent: function() {
    ...
    this.callParent(arguments);
    this.store.load();    
    ....

Answer 2

I would add that another common way to load data at the last moment is with the afterrender listener on the grid itself like this:

       listeners: {
             afterrender: function(grid) {
                grid.store.getProxy().url = 'request/my.json'; //modify your URL
                grid.store.load();    
             }
        }

As you can see you can also influence your store and proxy settings. This help with reuse of the stores for similar grids.