[英]Extjs4 combobox displayValue in grid
Please, help. 请帮忙。 I want to show my
displayValue
in the Grid. 我想在Grid中显示我的
displayValue
。 I found the solution here , but I can't understand how use it. 我在这里找到了解决方案,但我无法理解如何使用它。 My code:
我的代码:
columns:[...,{
header: 'Product',
id: 'combo',
locked: true,
dataIndex: 'prod_id',
editor: {
xtype: 'combobox',
store: new Ext.data.Store({
fields: ['value','display'],
data: prod_list
}),
displayField: 'display',
valueField: 'value'
}
},...]
Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField || combo.displayField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}
{
header: 'Товар',
id: 'combo',
locked: true,
dataIndex: 'prod_id',
editor: MyEditor,
renderer: Ext.util.Format.comboRenderer(MyEditor)
}
I tried to define editor outside of the column array. 我试图在列数组之外定义编辑器。
var MyEditor = new Ext.form.field.ComboBox({
store: new Ext.data.Store({
fields: ['value','display'],
data: prod_list
}),
displayField: 'display',
valueField: 'value'
});
Sorry for my English. 对不起我的英语不好。
var myStore = new Ext.data.Store({
fields: ['value','display'],
data: prod_list
});
... ...
editor: {
xtype: 'combobox',
store: myStore,
displayField: 'display',
valueField: 'value'
},
renderer: function(val){
index = myStore.findExact('value',val);
if (index != -1){
rs = myStore.getAt(index).data;
return rs.display;
}
}
You are missing a celleditor plugin. 你错过了一个celleditor插件。
It is best if you define the renderer as a reusable object so that you can globally control the behavior of your combo columns. 最好将渲染器定义为可重用对象,以便可以全局控制组合列的行为。
Since you are using ExtJS4, I added an alternative way to show the displayField of the combo editor in a cell, without having to define the editor outside of the scope of a column. 由于您使用的是ExtJS4,我添加了另一种方法来在单元格中显示组合编辑器的displayField,而无需在列范围之外定义编辑器。
First define the renderer: 首先定义渲染器:
Ext.ns("Ext.ux.util");
Ext.ux.util.ComboRenderer = function(val, metaData){
var combo = metaData.column.getEditor();
if(val && combo && combo.store && combo.displayField){
var index = combo.store.findExact(combo.valueField, val);
if(index >= 0){
return combo.store.getAt(index).get(combo.displayField);
}
}
return val;
};
Then give your grid a cellediting plugin: 然后给你的网格一个cellediting插件:
plugins: [
{
ptype: 'cellediting',
clicksToEdit: 1
}
]
And finally, assign the ComboRenderer to your column's renderer property like this: 最后,将ComboRenderer分配给列的渲染器属性,如下所示:
{
header: 'Product',
dataIndex: 'prod_id',
renderer: Ext.ux.util.ComboRenderer,
editor: {
xtype: 'combo',
store: new Ext.data.Store({
fields: ['value','display'],
data: prod_list
})
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.