iteye_14359
2009-12-21 17:38 浏览 252

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条回答 默认 最新

  • 已采纳
    shijiebao shijiebao 2009-12-22 10:25

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

    点赞 评论 复制链接分享
  • shijiebao shijiebao 2009-12-22 09:03

    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]

    点赞 评论 复制链接分享
  • shijiebao shijiebao 2009-12-22 09:10

    补充:
    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的值加载进去

    点赞 评论 复制链接分享
  • shijiebao shijiebao 2009-12-22 09:30

    把你的代码贴出来

    点赞 评论 复制链接分享
  • shijiebao shijiebao 2009-12-22 09:58

    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]

    点赞 评论 复制链接分享
  • shijiebao shijiebao 2009-12-22 10:00

    网格的renderTo用 renderTo : document.body

    点赞 评论 复制链接分享
  • shijiebao shijiebao 2009-12-22 10:18

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

    点赞 评论 复制链接分享

相关推荐