在一个表单中加载多个extjs组合框

Question

另一个ComboBox问题。

在我的表中，大约有10个字段是外键，所有字段都带有组合框。如何在一个表单中填写所有这些组合，而不用去服务器加载每个组合的存储10次？

Answer 1

它们是否作为单独的表存储在后端？如果是，那么正确的方法是将它们加载到服务器上10次。

在您提前到达该页面之前，将它们全部加载simultaneously

• loading

但是您仍然希望在ExtJs应用程序中有10个不同的商店。

如果你想把它们合并成一个商店，记住几件事

• 您需要在这个组合表中添加额外的字段，以便区分不同的列表。
• 您可以一次加载所有的数据，然后您仍然需要将它们分离到不同的存储对象中，因为否则不同的UI组件(组合框)将无法显示不同的data

集

Answer 2

众所周知的问题:)通常当我有这样的结构时

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

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

我必须手动加载每个组合：

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

在我之前的一个ExtJs3项目中，我对表单和组合框行为做了一些重写，这样我就可以使用form.getForm().loadData(data)一次，而不是像本例中那样手动设置值rawValue。但这种方式是隐含的，所以我更喜欢这种方式:)

Answer 3

示例：

模型1

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

模型2

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

即使你的商店有代理，你也可以禁用AutoLoad，这样你就可以在一个单独的请求中加载你想要的数量，就像这样：

手动创建存储：

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

创建一个Ajax请求，其中一次引入所有组合：

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