只是对应该很容易解决的事情感到沮丧,但我太简单了,看不到它:)
我有一个网格,其中 1 列是一个组合框。事情工作得很好,正确的值是通过我的 ajax 请求发送的,但是在我编辑了网格行之后,组合框消失了,出现的值不是标签,而是值。
editor: new Ext.form.field.ComboBox({
typeAhead: true,
lazyRender: true,
store: new Ext.data.ArrayStore({
fields: ['contact', 'contactLabel'],
data: [
[1,'Jan'],
[2,'Jeroen'],
[3,'Mattijs'],
[4,'Sven'],
[5,'Thomas'],
[6,'Yoran']
]
}),
valueField: 'contact',
displayField: 'contactLabel',
hiddenName: 'contact'
})
那么发生的情况是,当我将组合框更改为“Thomas”时,单元格的值变为“5”,而不是“Thomas”。我认为定义值/显示字段会有所作为,但事实并非如此。
有知道答案的人吗?
最佳答案
我不太确定我是否理解正确。如果是这样,您将需要一个渲染器。我猜代码下面的例子应该会告诉你你是否是这样的情况。
// the renderer. You should define it within a namespace
var comboBoxRenderer = function(combo) {
return function(value) {
var idx = combo.store.find(combo.valueField, value);
var rec = combo.store.getAt(idx);
return (rec === null ? '' : rec.get(combo.displayField) );
};
}
// the edit combo
var combo = new Ext.form.ComboBox({
store: store,
valueField: "value",
displayField: "text"
});
请参阅此完整工作示例(单元格编辑 + 行编辑) JSFiddle ()
这是完整的代码
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone', 'id'],
data:{'items':[
{"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224","id": 0},
{"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234","id": 1},
{"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244","id": 2},
{"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254","id": 3}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
// the combo store
var store = new Ext.data.SimpleStore({
fields: [ "value", "text" ],
data: [
[ 0, "Option 0" ],
[ 1, "Option 1" ],
[ 2, "Option 2" ],
[ 3, "Option 3" ]
]
});
// the renderer. You should define it within a namespace
var comboBoxRenderer = function(combo) {
return function(value) {
var idx = combo.store.find(combo.valueField, value);
var rec = combo.store.getAt(idx);
return (rec === null ? '' : rec.get(combo.displayField) );
};
}
// the edit combo
var combo = new Ext.form.ComboBox({
store: store,
valueField: "value",
displayField: "text"
});
// demogrid
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'},
{header: 'id', dataIndex: 'id', editor: combo, renderer: comboBoxRenderer(combo)}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: 'cell'
});
// demogrid
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'},
{header: 'id', dataIndex: 'id', editor: combo, renderer: comboBoxRenderer(combo)}
],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: 'row'
});
html
<div id="cell"></div>
<div id="row"></div>
关于extjs - onchange 后的 Ext Js 组合框值是值而不是标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14627100/