EditorGridPanel中ComboBox显示问题?

Question

[code="java"]
function getConsumerUnit(value){
var rd = houFct.EmptyStore.getAt(0);
if(rd){
return rd ? rd.get('unitName') : '请选择..';
};
if(houFct.get('consumerGrid').getGrid().store.getAt(0)){
var rowIndex = houFct.get('consumerGrid').getGrid().store.find("consumerUnitID",value);
if(rowIndex<0) return;

var record = houFct.get('consumerGrid').getGrid().store.getAt(rowIndex);
Ext.getCmp('risen-consumerUnitID').setValue(record.get('unitName'));
return record ? record.get('unitName') : '';

}
};

{
dataIndex : 'consumerUnitID',
header : '人员单位', width : 160,
renderer : getConsumerUnit,
editor : new Ext.form.ComboBox({
id : 'risen-consumerUnitID',
hiddenName : 'consumerUnitID',
valueField : 'consumerUnitID',
displayField : 'unitName',
editable : false,
mode:'remote',
store : houFct.EmptyStore,
onTriggerClick : function(){
Risen.CmpMgr.popWindow(houFct.get('HouConsumerUnitTabPanel'));
},
listeners : {
focus : function(cbx){
//这里的得到焦点分两种情况:一种是点击Grid的时候获得焦点,另一种是选择了树节点或获取焦点的情况
//有两种情况就要建立一种通讯机制,什么时候改赋值;什么时候不该赋值.这里用一个标志位(flag)来判断着两种情况.
if(houFct.get('flag')){
houFct.setCombo(Ext.getCmp('risen-consumerUnitID').id, houFct.get('record'));
houFct.put('flag', false);
}
}
}
})
}[/code]

问题是处在EditorGridPanel中放ComboBox.renderer参数我只能控制我展示给用户看的.的却renderer能做到这点.我这里的问题是我点击cell后ComboBox显示的是valueField(感觉dataIndex是什么,ComboBox就显示什么,比如我这里dataIndex显示的是ID, ComboBox就是显示的ID;dataIndex显示name,ComboBox就显示name.我这里dataIndex显示的是id,但是我renderer过后让其显示的name,但ComboBox显示的还是ID,貌似,我renderer的时候也将ComboBox的值设置...试试看)
[b]问题补充：[/b]
[code="java"]
function getConsumerUnit(value){
var rd = houFct.EmptyStore.getAt(0);
if(rd){
return rd ? rd.get('unitName') : '请选择..';
};
if(houFct.get('consumerGrid').getGrid().store.getAt(0)){
var rowIndex = houFct.get('consumerGrid').getGrid().store.find("consumerUnitID",value);
if(rowIndex<0) return;

var record = houFct.get('consumerGrid').getGrid().store.getAt(rowIndex);
Ext.getCmp('risen-consumerUnitID').setValue(record.get('unitName'));
return record ? record.get('unitName') : '';

}
};

{
dataIndex : 'consumerUnitID',
header : '人员单位', width : 160,
renderer : getConsumerUnit,
editor : new Ext.form.ComboBox({
id : 'risen-consumerUnitID',
hiddenName : 'consumerUnitID',
valueField : 'consumerUnitID',
displayField : 'unitName',
editable : false,
mode:'remote',
store : houFct.EmptyStore,
onTriggerClick : function(){
Risen.CmpMgr.popWindow(houFct.get('HouConsumerUnitTabPanel'));
},
listeners : {
focus : function(cbx){
//这里的得到焦点分两种情况:一种是点击Grid的时候获得焦点,另一种是选择了树节点或获取焦点的情况
//有两种情况就要建立一种通讯机制,什么时候改赋值;什么时候不该赋值.这里用一个标志位(flag)来判断着两种情况.
if(houFct.get('flag')){
houFct.setCombo(Ext.getCmp('risen-consumerUnitID').id, houFct.get('record'));
houFct.put('flag', false);
}
}
}
})
}[/code]

问题是处在EditorGridPanel中放ComboBox.renderer参数我只能控制我展示给用户看的.的却renderer能做到这点.我这里的问题是我点击cell后ComboBox显示的是valueField(感觉dataIndex是什么,ComboBox就显示什么,比如我这里dataIndex显示的是ID, ComboBox就是显示的ID;dataIndex显示name,ComboBox就显示name.我这里dataIndex显示的是id,但是我renderer过后让其显示的name,但ComboBox显示的还是ID,貌似,我renderer的时候也将ComboBox的值设置...试试看)
[b]问题补充：[/b]
[code="java"]
function getConsumerUnit(value){
var rd = houFct.EmptyStore.getAt(0);
if(rd){
return rd ? rd.get('unitName') : '请选择..';
};
if(houFct.get('consumerGrid').getGrid().store.getAt(0)){
var rowIndex = houFct.get('consumerGrid').getGrid().store.find("consumerUnitID",value);
if(rowIndex<0) return;

var record = houFct.get('consumerGrid').getGrid().store.getAt(rowIndex);
Ext.getCmp('risen-consumerUnitID').setValue(record.get('unitName'));
return record ? record.get('unitName') : '';

}
};

{
dataIndex : 'consumerUnitID',
header : '人员单位', width : 160,
renderer : getConsumerUnit,
editor : new Ext.form.ComboBox({
id : 'risen-consumerUnitID',
hiddenName : 'consumerUnitID',
valueField : 'consumerUnitID',
displayField : 'unitName',
editable : false,
mode:'remote',
store : houFct.EmptyStore,
onTriggerClick : function(){
Risen.CmpMgr.popWindow(houFct.get('HouConsumerUnitTabPanel'));
},
listeners : {
focus : function(cbx){
//这里的得到焦点分两种情况:一种是点击Grid的时候获得焦点,另一种是选择了树节点或获取焦点的情况
//有两种情况就要建立一种通讯机制,什么时候改赋值;什么时候不该赋值.这里用一个标志位(flag)来判断着两种情况.
if(houFct.get('flag')){
houFct.setCombo(Ext.getCmp('risen-consumerUnitID').id, houFct.get('record'));
houFct.put('flag', false);
}
}
}
})
}[/code]

问题是处在EditorGridPanel中放ComboBox.renderer参数我只能控制我展示给用户看的.的却renderer能做到这点.我这里的问题是我点击cell后ComboBox显示的是valueField(感觉dataIndex是什么,ComboBox就显示什么,比如我这里dataIndex显示的是ID, ComboBox就是显示的ID;dataIndex显示name,ComboBox就显示name.我这里dataIndex显示的是id,但是我renderer过后让其显示的name,但ComboBox显示的还是ID,貌似,我renderer的时候也将ComboBox的值设置...试试看)
[b]问题补充：[/b]
[code="java"]
function getConsumerUnit(value){
var rd = houFct.EmptyStore.getAt(0);
if(rd){
return rd ? rd.get('unitName') : '请选择..';
};
if(houFct.get('consumerGrid').getGrid().store.getAt(0)){
var rowIndex = houFct.get('consumerGrid').getGrid().store.find("consumerUnitID",value);
if(rowIndex<0) return;

var record = houFct.get('consumerGrid').getGrid().store.getAt(rowIndex);
Ext.getCmp('risen-consumerUnitID').setValue(record.get('unitName'));
return record ? record.get('unitName') : '';

}
};

{
dataIndex : 'consumerUnitID',
header : '人员单位', width : 160,
renderer : getConsumerUnit,
editor : new Ext.form.ComboBox({
id : 'risen-consumerUnitID',
hiddenName : 'consumerUnitID',
valueField : 'consumerUnitID',
displayField : 'unitName',
editable : false,
mode:'remote',
store : houFct.EmptyStore,
onTriggerClick : function(){
Risen.CmpMgr.popWindow(houFct.get('HouConsumerUnitTabPanel'));
},
listeners : {
focus : function(cbx){
//这里的得到焦点分两种情况:一种是点击Grid的时候获得焦点,另一种是选择了树节点或获取焦点的情况
//有两种情况就要建立一种通讯机制,什么时候改赋值;什么时候不该赋值.这里用一个标志位(flag)来判断着两种情况.
if(houFct.get('flag')){
houFct.setCombo(Ext.getCmp('risen-consumerUnitID').id, houFct.get('record'));
houFct.put('flag', false);
}
}
}
})
}[/code]

问题是处在EditorGridPanel中放ComboBox.renderer参数我只能控制我展示给用户看的.的却renderer能做到这点.我这里的问题是我点击cell后ComboBox显示的是valueField(感觉dataIndex是什么,ComboBox就显示什么,比如我这里dataIndex显示的是ID, ComboBox就是显示的ID;dataIndex显示name,ComboBox就显示name.我这里dataIndex显示的是id,但是我renderer过后让其显示的name,但ComboBox显示的还是ID,貌似,我renderer的时候也将ComboBox的值设置...试试看)

Answer 1

[code="javascript"]
Ext.onReady(function() {
// conmbobox
var box = new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
mode : 'local',
valueField : 'id',
displayField : 'name',
store : new Ext.data.JsonStore({
fields : [{
name : 'id',
type : 'int'
}, {
name : 'name',
type : 'string'
}],
data : [{
id : 1,
name : '测试1'
}, {
id : 2,
name : '测试2'
}, {
id : 3,
name : '测试3'
}, {
id : 4,
name : '测试4'
}]
})
});
// 网格数据,这里测试用的两列
var gridData = [{
unitId : 1,
unitName : '11111'
}, {
unitId : 2,
unitName : '22222'
}, {
unitId : 3,
unitName : '33333'
}];
// 网格,要使用EditorGridPanel才能对grid中的ComboBox的进行选择，LZ贴过//去试下
var grid = new Ext.grid.EditorGridPanel({
renderTo : document.body,
frame : true,
store : new Ext.data.JsonStore({
fields : [{
name : 'unitId',
type : 'int'
}, {
name : 'unitName',
type : 'string'
}],
data : gridData
}),
columns : [{
header : 'ComboBox列,显示displayField',
width:160, align : 'center',
dataIndex : 'unitId',
editor : box,
renderer : Ext.util.Format.comboRenderer(box)
}, {
header : 'unitName列',
dataIndex : 'unitName'
}]

        });

Ext.util.Format.comboRenderer = function(combo) {
return function(value) {
var record = combo.findRecord(combo.valueField, value);
return record
? record.get(combo.displayField)
: combo.valueNotFoundText;
}
}
});

[/code]