extjs网格组合框问题 [英] extjs grid combo box issue
问题描述
我正在使用带有标签和id值的ext js auto complete组合框，它完美地显示了前面的标签，并将id作为值。
I am using ext js auto complete combo box with label and id values, It is perfectly showing the label in front and getting id as a value.
但是，我的问题是在组合框中选择标签后立即显示id值而不是标签值。
But my problem is after selecting the label in combo box it immediately showing the id value instead of label value.
我已经创建了示例网格代码。请查看代码和图片。
I have created example grid code. Please view the code and image.
edit-grid.js
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel({});
var lightCombo = new Ext.data.ArrayStore({
data : [['1','Rambutan'],['2','Jackfruit'],['3','Passion Fruit'],['4','Lychee'],['5','Star fruit'],['6','Mangosteen'],['7','Kumquat'],['8','Mango'],['9','Apple'],['10','Orange']],
fields: ['id','displayValue'],
sortInfo: {
field: 'displayValue',
direction: 'ASC'
}
});
var fightCombo = new Ext.data.ArrayStore({
data : [['1','Bison'],['2','Bengal Tiger'],['3','Blackbuck Antelope'],['4','Black Bear'],['5','Black-footed Ferrets'],['6','Bobcat'],['7','Bull Musk Ox'],['8','Caracal'],['9','Caribou'],['10','Cheetah']],
fields: ['id','displayValue'],
sortInfo: {
field: 'displayValue',
direction: 'ASC'
}
});
var mightCombo = new Ext.data.ArrayStore({
data : [['1','Banyan Tree'],['2','Peepal Tree'],['3','Neem Tree'],['4','Garden Asparagus'],['5','Arjuna Tree'],['6','Aloe Vera'],['7','Tulsi Plant'],['8','Amla Plant'],['9','Ashwagandha'],['10','Brahmi']],
fields: ['id','displayValue'],
sortInfo: {
field: 'displayValue',
direction: 'ASC'
}
});
var tightCombo = new Ext.data.ArrayStore({
data : [['1','PHP'],['2','C#'],['3','AJAX'],['4','JavaScript'],['5','Perl'],['6','C'],['7','Ruby on Rails'],['8','Java'],['9','Python'],['10','VB.Net']],
fields: ['id','displayValue'],
sortInfo: {
field: 'displayValue',
direction: 'ASC'
}
});
var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{
id: 'light',
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new Ext.form.ComboBox({
store: lightCombo,
displayField:'displayValue',
valueField: 'id',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
hideTrigger:false,
lazyRender: true,
emptyText: '',
typeAhead: false
})
},{
id:'fight',
header: 'fight',
dataIndex: 'fight',
width: 130,
editor: new Ext.form.ComboBox({
store: fightCombo,
displayField:'displayValue',
valueField: 'id',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
hideTrigger:false,
lazyRender: true,
emptyText: '',
typeAhead: false
})
},{
id:'might',
header: 'might',
dataIndex: 'might',
width: 130,
editor: new Ext.form.ComboBox({
store: mightCombo,
displayField:'displayValue',
valueField: 'id',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
hideTrigger:false,
lazyRender: true,
emptyText: '',
typeAhead: false
})
},{
id:'tight',
header: 'tight',
dataIndex: 'tight',
width: 130,
editor: new Ext.form.ComboBox({
store: tightCombo,
displayField:'displayValue',
valueField: 'id',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
hideTrigger:false,
lazyRender: true,
emptyText: '',
typeAhead: false
})
}
]
});
var store = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: [
{name: 'light'},
{name: 'fight'},
{name: 'might'},
{name: 'tight'}
]
})
});
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width: 700,
height: 300,
title: 'Edit Plants?',
frame: true,
sm: sm,
clicksToEdit: 1
});
initialRowCreation();
function initialRowCreation(){
var Plant = grid.getStore().recordType;
var p = new Plant({
light: '',
fight: '',
might: '',
tight: ''
});
grid.stopEditing();
store.insert(0, p);
grid.getView().refresh();
grid.startEditing(0, 0);
}
});
感谢提前。
rajasekar
Thanks in Advance. rajasekar
推荐答案
发生问题是因为您在网格中显示值。您需要为该列创建一个使用记录中正确字段的渲染器。
Your problem occurs because you are displaying the value within a grid. You need to create a renderer for that column which uses the correct field from the record.
http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.form。 ComboBox
查找网格中的组合框
如果在编辑器网格中使用ComboBox，编辑器不活动时，需要渲染器显示displayField。手动设置渲染器，或实现可重用的渲染，例如：
Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}
您的代码还遭受了大量额外的逗号财产清单的结尾。这甚至不会在IE中解析，我将其从您发布的代码中删除。
Your code was also suffering from lots of extra commas at the end of property lists. That will not even parse in IE, I removed them from the code you posted.
这篇关于extjs网格组合框问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
