Loading multiple extjs comboboxes in a form

Are they stored as separate tables on the back end? If yes, then the correct way would be to load them going to the server 10 separate times. You can optimize this scenario by:

• loading them all simultaneously
• loading them all before you get to that page in advance

But you still would want to have 10 different stores in your ExtJs application.

If you wish to combine them into single store remember couple things

• you would need to add additional field into this combined table so you can distinguish different lists.
• you would load them all at once
• then you would still need to separate them into different store objects because otherwise different UI components (comboboxes) won't be able to show different sets of data

Well known problem :) Typically when I have structure like this

var data = {
    ForeignKeyObjectId: 123,
    ForeignKeyObject: {
        Id: 123,
        SomeValue: 'Some text 1'
    },

    SomeOtherObjectId: 456,
    SomeOtherObject: {
        Id: 456,
        SomeValue: 'Some text 2'
    }
    //, ... same 8 times more
}

I have to load each combo manually:

var combo1 = this.down('#foreignKeyObjectCombo');
combo1.setValue(data.ForeignKeyObject.Id);
combo1.setRawValue(data.ForeignKeyObject.SomeValue);
combo1.store.loadData([data.ForeignKeyObject], true);

var combo2 = this.down('#someOtherObjectCombo');
combo2.setValue(data.SomeOtherObject.Id);
combo2.setRawValue(data.SomeOtherObject.SomeValue);
combo2.store.loadData([data.SomeOtherObject], true);

// same 8 times more

In one of my previous projects on ExtJs 3 I made some overrides for form and combobox behaviour so that I could use form.getForm().loadData(data) once instead of manually setting value, rawValue like in this example. But that way was implicit, so I like more this way :)

Example:

Model 1

Ext.create('Ext.data.Store', {
        model: 'EmployeeType',
        data : [
            {type: 1,    description: 'Administrative'},
            {type: 2,    description: 'Operative'},
        ]
    });

Model 2

Ext.create('Ext.data.Store', {
    model: 'BloodType',
    data : [
        {type: 1,    description: 'A+'},
        {type: 2,    description: 'B+'},
    ]
});

Even if your stores have Proxy, you can disable AutoLoad so you can load as many as you want in one single request like this:

Create the stores manually:

employeeType = Ext.create('Ext.data.Store', {model: EmployeeType});
bloodType = Ext.create('Ext.data.Store', {model: BloddType});

Create an Ajax request where you bring all combos at once:

Ext.ajax.request({
    url: './catalogs/getalldata',
    success: function(response) {
        var json = Ext.decode(response.responseText);
        employeeType.loadData(json.employeeTypes);
        bloodType.loadData(json.bloodTypes);
        //...
    } 
});