ExtJS 4 - Comboboxes, MVC, Autoloading of many stores & loading models

[oomta]

Hello ExtJS community,

I'm sure this has been answered countless times before, but since I couldn't find it whilst searching, I figured I'd ask it here.

Let me clarify, my app works just fine.
My question is more related to performance now.

As my application grows, more stores are added, etc... and I find the time it takes for the app to initiate takes longer.
To combat this, I decided to move to a MVC architecture and load my controllers and stores only when needed.
Now, when creating an instance of a controller, it loads all the associated stores (good) and they have autoload set to true. If autoload is not set to true, then when I open the form, the comboboxes don't populate with the necessary form data.

So I have to set autoload to true for all the relevant stores. The problem is... in a scenario where there are many remote comboboxes and stores (let's stay around 12 on one form), with lots of data pulled remotely from the database, this can really slow things down, due to the amount of data dynamically loaded and bound to the combo boxes.

My controller has two separate methods... one list() method which displays a grid view, and one view() method which opens a pop up window to show the data.
The view() method is where all the comboboxes are contained.

In the list() method, I have no need for the controller to autoload all the stores remotely.
I would like the stores to autoload only after I have called the view() method, opened the relevant window and loaded the model data.

One solution that comes to mind is to remove the autoload properties and for every combobox, call the store's load() method from the view() function.

I'd like to know what others have done in similar circumstances, what solutions you may have available and whether there's a better way than the approach I've taken.

Thanks in advance!

[oomta]

Here's one method I found on a blog post (slightly modified to get around a bug when loading "direct" stores...
http://www.levihackwith.com/extjs-4-...remote-stores/

Ext.form.field.ComboBox.override( {
  setValue: function(v) {
    v = (v && v.toString) ? v.toString() : v;
          if(!this.store.isLoaded && this.queryMode == 'remote' && this.store.proxy.type !== 'direct') {
                this.store.addListener('load', function() {
                    this.store.isLoaded = true;
                      this.setValue(v);
              }, this);
             this.store.load();
        } else {
              this.callOverridden(arguments);
        }
    }
});

However, I'm leaving this thread open to discussion, as some may argue that having your views trigger the loading of your stores may not be a good idea (not the MVC way?).

[oomta]

As there are no further replies, I'm closing this thread and marking my previous post as the best answer.
It has been working for me so far.