Loading multiple extjs dropdowns in a form

Question

another question is ComboBox.

My table has about 10 fields, which are foreign keys, all of which are presented with lists. How to fill out all these combos in the form, don’t go 10 times to the server to download the storage of each of them?

Answer 1

Are they saved as separate tables on the rear panel? If so, the correct way would be to upload them to the server 10 times at different times. You can optimize this scenario by:

• Download all of them at once
• download them all before you get to this page in advance

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

If you want to combine them into one store, remember a couple of things

• you need to add an extra field to this combo table so you can distinguish between different lists.
• you upload them all at once
• then you still need to separate them into different storage objects, because otherwise different components of the user interface (comboboxes) will not be able to show different data sets

Answer 2

Well-known problem :) Usually when I have a 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 need 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 ExtJs 3 projects, I made some overrides for the behavior of the form and combobox to use form.getForm().loadData(data) once instead of manually setting the rawValue value, as in this example. But this path was implicit, so I like this path more :)

Answer 3

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 a proxy server, you can disable AutoLoad so that you can download as many as you want in a single request, for example:

Create repositories manually:

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

Create an Ajax request in which you enter all the combos at the same time:

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