EditorGridPanel中ComboBox显示问题?

[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的值设置...试试看)

7个回答

[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]

dataIndex是对应的store中的定义的字段, Combobox中的valueField是值需要保存的值,例如id,displayField是你显示给用户看的内容,如果Combobox在form中hiddenName也就相当于valueField,是你form提交的时候的值;
一般情况下例如Combobox的值是这样的:[{'id':1,name:'测试1'},{'id':2,name:'测试2'},{'id':3,name:'测试3'}],那么你网格中对应的值只要是1,2,3那么这列就会显示name的内容,LZ记住你必须先把Combobox的值加载进去

[code="javascript"]
// 资金安排
var fundSourceComBox = new Ext.form.ComboBox({
typeAhead : true,
selectOnFocus : true,
forceSelection : true,
editable : false,
lazyRender : true,
readOnly : true,
triggerAction : 'all',
width : 130,
mode : 'local',
valueField : 'id',
displayField : 'name',
store : new Ext.data.JsonStore({
fields : [{
name : 'id',
type : 'int'
}, {
name : 'name',
type : 'string'
}],
//data : rs_.fundSourcePojos
data:[{'id':1,name:'测试1'},{'id':2,name:'测试2'},{'id':3,name:'测试3'}]
})

        });

网格中的使用:
.....
, {
header : '

经费安排
',
align : 'center',
width : 140,
dataIndex : 'moneyOrignCodeId',
editor : fundSourceComBox,
renderer : Ext.util.Format
.comboRenderer(fundSourceComBox)
},
.........

//加上这个函数渲染,否则显示的就是value值:
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]

补充:
dataIndex是对应网格中store中的定义的字段, 和Combobox没有任何的关系,只要你网格store中dataIndex对应的值是Combobox中valueField中的值网格的这一列就会显示Combobox中displayField的值;
Combobox中的valueField是需要保存的值,例如id,displayField是你显示给用户看的内容,如果Combobox在form中hiddenName也就相当于valueField,是你form提交的时候的值;
一般情况下例如Combobox的值是这样的:[{'id':1,name:'测试1'},{'id':2,name:'测试2'},{'id':3,name:'测试3'}],id就是valueField,name就是displayField,网格中对应的值只要是1,2,3那么这列就会显示name的内容,LZ记住你必须先把Combobox的值加载进去

把你的代码贴出来

LZ看这段测试代码吧,已经写的很清楚了
[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'
}];
// 网格
var grid = new Ext.grid.GridPanel({
// renderTo : document.body,
renderTo : "subMenuIframe",
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]

网格的renderTo用 renderTo : document.body

ComboBox的显示是你指定的displayField,如果你选择下拉框显示的是value的话就要看下
ComboBox的store有没有定义错误,要么你把这个hiddenName拿掉,实际上ComboBox在网格中和直接将ComboBox显示在页面是一样的,并没有任何区别,建议LZ把ComboBox单独测试,如果选择的值显示是displayField那应该是没有问题的

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!