javascript - 在不修改数据存储的情况下将选项附加到组合框

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”，但这不是我想要的。我希望将“全部”作为实际选项。

Answer 1

Combo 是一个简单的 HTML SELECT 字段。如果没有 OPTION，您将无法填充下拉菜单。

不添加到商店是不可能实现的。您在组合中看到的数据来自商店。

根据文档:

A combobox control with support for autocomplete, remote loading, and many other features.

A ComboBox is like a combination of a traditional HTML text field and a field; the user is able to type freely into the field, and/or pick values from a dropdown selection list. The user can input any value by default, even if it does not appear in the selection list; to prevent free-form values and restrict them to items in the list, set forceSelection to true.

The selection list's options are populated from any Ext.data.Store, including remote stores. The data items in the store are mapped to each option's displayed text and backing value via the valueField and displayField configurations, respectively.