ExtJS-带有商店的组合框添加自定义选择

Question

有没有一种方法可以在不更改EXT存储(本例中为myStore.carTypes(的情况下添加一个只显示"无"的选项？自定义值为">

type: 'combo',
fieldLabel: 'Car',
name: 'carName',
otrId: 'carName',
hidden: false,
allowBlank: true,
store: 'myStore.carTypes',
displayField: 'name',
valueField: 'name',
maskRe: /

Answer 1

以下是我根据阅读您的问题得出的假设：您不希望在商店中有条目("无"(，但仍希望在组合框中有该条目。您想要一个名为None、值为"的条目，但由于displayField和valueField相同，因此出现问题。

我有一个解决这些问题的窍门。首先，在combobox中创建一个新的存储，其中包含一个条目"None"，并有一个侦听器在请求之前更改存储数据。在本例中，请确保组合框valueField和displayField不同(缩写，name(。在beforequery监听器中，我们修改与组合框关联的存储，并在本例中从其他存储(状态1(复制数据。在复制时，我们将states1存储中的名称复制为新存储中的name和abbr。这应该可以解决你的问题。请看下面的代码，或者看看它在这个小提琴上的作用。如果你正在操作小提琴，请确保选择的主题是经典的。

Ext.application({
name: 'Fiddle',
launch: function () {
var states1 = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "Alabama",
"name": "Alabama"
}, {
"abbr": "Alaska",
"name": "Alaska"
}, {
"abbr": "Arizona",
"name": "Arizona"
}]
});
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: Ext.create('Ext.data.Store', {
data: [{
name: 'None',
abbr: ''
}, ]
}),
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
editable: false,
renderTo: Ext.getBody(),
listeners: {
beforequery: function (queryEvent, opts) {
states1.each(function (record) { //replace states1 with your store var
queryEvent.combo.store.add({
name: record.data.name,
abbr: record.data.name
});
});
}
}
});
}
});