Question

有没有办法在不修改基础数据存储的情况下向组合框添加选项？我的表格中有2个组合框元素。两个组合框之间的唯一区别是，一个具有额外的“全部”选项。例如：

var states = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data : [{"abbr":"AL", "name":"Alabama"}, {"abbr":"AK", "name":"Alaska"}, {"abbr":"AZ", "name":"Arizona"}] }); //The first combobox should load the data as is from the store above Ext.create('Ext.form.ComboBox', { fieldLabel: 'Choose State', store: states, queryMode: 'local', displayField: 'name', valueField: 'abbr', renderTo: Ext.getBody() }); //There should be a second combobox here that is almost identical //to the one above, just appending an additional option (that says "All") //to the top of the list

我知道有多种方法可以改变商店，例如：

states.insert(0, [{ abbr: 'All', name: 'All' }])

但是，我希望在不改变商店的情况下实现这一点，纯粹将选项添加到组合框本身。这可能吗？

更新

我知道我可以让我可以将组合框'emptyText'配置选项设置为'All'，但这不是我想要的。我想把'All'作为一个实际的选择。

Answer 1

Combo是HTML的简单SELECT字段。如果没有OPTION，则无法填充下拉列表。

如果不加入商店，就无法实现它。您在组合中看到的数据来自商店。

根据文件：

组合框控件，支持自动完成，远程加载和许多其他功能。

ComboBox就像传统HTML文本字段和字段的组合;用户可以自由键入字段，和/或从下拉列表选择列表中选择值。用户可以默认输入任何值，即使它没有出现在选择列表中;要防止自由格式值并将其限制为列表中的项目，请将forceSelection设置为true。

选择列表的选项是从任何Ext.data.Store填充的，包括远程商店。商店中的数据项分别通过valueField和displayField配置映射到每个选项的显示文本和支持值。

Answer 2

我已经使用“All”组合框，我希望我做对了，现在还没有源代码可用，但要为其中一个组合框创建一个“全部”选项，在ExtJS 6中你有做这样的事情：

var storeWithAll = Ext.create('Ext.data.Store',{
    url:
    proxy: etc.
    listeners:{
        load:function(store) {
            // Add the "All" record after every load!
            store.insert(0, [{
                abbr: 'All',
                name: 'All',
                special:true
            }]);
        }
    }
});
var storeWithoutAll = Ext.create('Ext.data.ChainedStore',{
    // ChainedStore has the same data as the source:
    source: storeWithAll,
    filters:[{
        // Filter away the "All" record
        filterFn:function(item) {return !item.get("special");}
    }]
});
Ext.create('Ext.form.field.ComboBox',{
    store: storeWithAll, // Use the store with "All" record
    ...
});
Ext.create('Ext.form.field.ComboBox',{
    store: storeWithoutAll, // Use the store without "All" record
    ...
});

在不修改数据存储

2 个答案: