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

【问题标题】：Loading multiple extjs comboboxes in a form在表单中加载多个 extjs 组合框
【发布时间】：2014-06-04 06:05:21
【问题描述】：

另一个 ComboBox 问题。

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

【问题讨论】：

标签： extjs

【解决方案1】：

它们是否在后端存储为单独的表？如果是，那么正确的方法是将它们分别加载到服务器 10 次。您可以通过以下方式优化此方案：

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

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

如果您希望将它们组合成一个商店，请记住几件事

您需要在此组合表中添加其他字段，以便区分不同的列表。
你可以一次加载它们
那么您仍然需要将它们分成不同的存储对象，否则不同的 UI 组件（组合框）将无法显示不同的数据集

【讨论】：

假设将组合框更改为包含“id”和“display”值的自定义editField。我将能够使用单个商店，但即便如此，我还是需要一个调用来获取常规字段，另一个调用来获取外键对（id 和显示值）。
是的。加载多个商店有什么问题？
问题在于它所花费的时间。
在启动应用程序时同时加载它们
那么您需要使用服务器端过滤，并且最初只从 10 个存储中提取与您的记录匹配的那些键值对。如果用户决定打开组合框 - 你可以动态加载完整的商店。

【解决方案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

在我之前关于 ExtJs 3 的一个项目中，我对表单和组合框行为进行了一些覆盖，以便我可以使用一次 form.getForm().loadData(data) 而不是手动设置值，如本例中的 rawValue。但这种方式是隐含的，所以我更喜欢这种方式:)

【讨论】：

【解决方案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);
        //...
    } 
});

【讨论】：