Extjs5:组合框不显示所选值
Extjs5 : ComboBox not showing the selected value
我创建了一个 comboBox
,当我 select 一个值时,将不会显示任何值。
Ext.create("Ext.form.field.ComboBox", {
name: el.name,
fieldLabel: el.labelId,
hidden: !(el.visible),
displayField:"value",
valueField:"value",
flex: 1,
store:Ext.create("Ext.data.Store",{
fields: ['key', 'value'],
data: [
{ key: "10",value: "etap 0"},
{ key: "200",value: "etape 1"},
{ key: "300", value: "etape 3"}
]
}),
regex: el.parameterType.regex,
regexText: el.regExErrMsg,
allowBlank: !el.mandatory,
blankText: el.requiredErrMsg
})
编辑
这里就是return组合的方法:
drawField: function (el) {
var me = this;
var uiField = Ext.create(me.componentType, {
name: el.name,
fieldLabel: el.labelId,
hidden: !(el.visible),
flex: 1,
regex: el.parameterType.regex,
regexText: el.regExErrMsg,
allowBlank: !el.mandatory,
blankText: el.requiredErrMsg
});
if (el.parameterType.isCombo) {
uiField.displayField = 'value';
uiField.valueField = 'key';
uiField.editable = false;
uiField.store = Ext.create('Ext.data.Store', {
fields: ['key', 'value'],
data: el.parameterType.values
});
}
return uiField;
}
和 el
参数是一个 JavaScript 对象,如下所示:
{
name: "",
labelId: "Champ :",
parameterType: {
regEx: "^.*$",
errID: "115",
isCombo: true,
values:[
{key: "10", value: "etap 0"},
{key: "200",value: "etape 1"},
{key: "300",value: "etape 3"},
],
selectedValue: "etap 0"
},
mandatory: false,
visible: true,
defaultValue: "",
elementType: "LIST_BOX",
regExErrMsg: "Valeur invalide.",
requiredErrMsg: ""
}
和 me.componentType
在运行时是 Ext.form.field.ComboBox
valueField:"value" 错误,您应该指定 valueField:"key" 以便 ComboBox 正常工作
这个 fiddle 对我来说很好,我删除了对 el 的引用,因为它对我来说是未定义的,并且还将 Ext.data.store 更改为 Ext.data.Store
https://fiddle.sencha.com/#fiddle/jj6
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create("Ext.form.field.ComboBox", {
renderTo: Ext.getBody(),
displayField: "value",
valueField: "value",
flex: 1,
store: Ext.create("Ext.data.Store", {
fields: ['key', 'value'],
data: [{
key: "10",
value: "etap 0"
}, {
key: "200",
value: "etape 1"
}, {
key: "300",
value: "etape 3"
}]
})
});
}
});
我创建了一个 comboBox
,当我 select 一个值时,将不会显示任何值。
Ext.create("Ext.form.field.ComboBox", {
name: el.name,
fieldLabel: el.labelId,
hidden: !(el.visible),
displayField:"value",
valueField:"value",
flex: 1,
store:Ext.create("Ext.data.Store",{
fields: ['key', 'value'],
data: [
{ key: "10",value: "etap 0"},
{ key: "200",value: "etape 1"},
{ key: "300", value: "etape 3"}
]
}),
regex: el.parameterType.regex,
regexText: el.regExErrMsg,
allowBlank: !el.mandatory,
blankText: el.requiredErrMsg
})
编辑
这里就是return组合的方法:
drawField: function (el) {
var me = this;
var uiField = Ext.create(me.componentType, {
name: el.name,
fieldLabel: el.labelId,
hidden: !(el.visible),
flex: 1,
regex: el.parameterType.regex,
regexText: el.regExErrMsg,
allowBlank: !el.mandatory,
blankText: el.requiredErrMsg
});
if (el.parameterType.isCombo) {
uiField.displayField = 'value';
uiField.valueField = 'key';
uiField.editable = false;
uiField.store = Ext.create('Ext.data.Store', {
fields: ['key', 'value'],
data: el.parameterType.values
});
}
return uiField;
}
和 el
参数是一个 JavaScript 对象,如下所示:
{
name: "",
labelId: "Champ :",
parameterType: {
regEx: "^.*$",
errID: "115",
isCombo: true,
values:[
{key: "10", value: "etap 0"},
{key: "200",value: "etape 1"},
{key: "300",value: "etape 3"},
],
selectedValue: "etap 0"
},
mandatory: false,
visible: true,
defaultValue: "",
elementType: "LIST_BOX",
regExErrMsg: "Valeur invalide.",
requiredErrMsg: ""
}
和 me.componentType
在运行时是 Ext.form.field.ComboBox
valueField:"value" 错误,您应该指定 valueField:"key" 以便 ComboBox 正常工作
这个 fiddle 对我来说很好,我删除了对 el 的引用,因为它对我来说是未定义的,并且还将 Ext.data.store 更改为 Ext.data.Store
https://fiddle.sencha.com/#fiddle/jj6
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create("Ext.form.field.ComboBox", {
renderTo: Ext.getBody(),
displayField: "value",
valueField: "value",
flex: 1,
store: Ext.create("Ext.data.Store", {
fields: ['key', 'value'],
data: [{
key: "10",
value: "etap 0"
}, {
key: "200",
value: "etape 1"
}, {
key: "300",
value: "etape 3"
}]
})
});
}
});