Ext 下拉菜单(ComboBox) 自动显示选项中的文本项 问题


 

在Ext 2.2 中,如果使用Ext.form.ComboBox 作为editor,并设置了store,在选择后,在表格单元中显示的是store中的valueField,显然不符合实际使用习惯。如果要改变单元格的展示方式,应该在ColumnModel 配置column时设置renderer,顾名思义就是一个渲染器,默认参数有(value, metadata, record, rowIndex, colIndex, store),具体说明见API

测试如:

       dataColumnModel = new Ext.grid.ColumnModel([
{
                header: 'Party',
                dataIndex: 'IDparty',
                width: 150,
                editor: new Ext.form.ComboBox({
                    typeAhead: true,
                    triggerAction: 'all',
                    store:new Ext.data.SimpleStore({
                        fields:['partyValue', 'partyName'],
                        data: [['1','No Party'],['2','Federalist'],['3','Democratic-Republican'],['4','Democratic'],['5','Whig'],['6','Republican']]
                    }),
                    mode: 'local',
                    displayField: 'partyName',
                    valueField: 'partyValue',
                    listClass: 'x-combo-list-small'
                })
                ,renderer: function(value, metadata, record, rowIndex, colIndex, store){
                    console.log(this);
// how to get the editor.store.data ?
                    return value;
                }
            }
        ]);

具体例子来源: Tutorial:Grid PHP SQL Part7

但似乎没有办法在renderer内部访问当前column的editor。

这个应该是个常见需求,搜索官方论坛后果然有所获。有人找到了临时解决方案:

// link http://extjs.com/forum/showthread.php?p=255483
Ext.override(Ext.grid.GridView, {
getColumnData : function(){
   var cs = [], cm = this.cm, colCount = cm.getColumnCount();
   for(var i = 0; i < colCount; i++){
    var name = cm.getDataIndex(i);
    cs[i] = {
      name : (typeof name == 'undefined' ? this.ds.fields.get(i).name : name),
      renderer : cm.getRenderer(i),
      id : cm.getColumnId(i),
      style : this.getColumnStyle(i),
      editor : cm.getCellEditor(i, 0)
                           //,cm: cm
    };
   }
   return cs;
}
});
Ext.util.Format.comboboxRenderer = function(value){
var editor = this.editor;
if(editor){
   var field = editor.field;
   if(field && field.findRecord && field.valueField) {
    if((typeof value.indexOf === 'function') && value.indexOf(',') != -1){
     // we have a lovcombo with several options selected
     var keys = value.split(',');
     var values = [];
     Ext.each(keys, function(key){
      var rec = field.findRecord(field.valueField, key);
      if(rec){
       values.push(rec.data[field.displayField]);
      }
     });
     return values.join(', ');
    }else{
     var rec = field.findRecord(field.valueField, value);
     if(rec){
      return rec.data[field.displayField];
     }
    }
   }
}
return value;
};

原理就是:
1.覆盖Ext原生的Ext.grid.GridView,把editor附加到renderer上,
2. 添加一个Ext.util.Format.comboboxRenderer,在配置时renderer指定为这个,修改后的代码为:

       dataColumnModel = new Ext.grid.ColumnModel([
{
                header: 'Party',
                dataIndex: 'IDparty',
                width: 150,
                editor: new Ext.form.ComboBox({
                    typeAhead: true,
                    triggerAction: 'all',
                    store:new Ext.data.SimpleStore({
                        fields:['partyValue', 'partyName'],
                        data: [['1','No Party'],['2','Federalist'],['3','Democratic-Republican'],['4','Democratic'],['5','Whig'],['6','Republican']]
                    }),
                    mode: 'local',
                    displayField: 'partyName',
                    valueField: 'partyValue',
                    listClass: 'x-combo-list-small'
                })
                ,renderer: Ext.util.Format.comboboxRenderer
            }
        ]);

如果要更个性化的定制,也可以直接在renderer里访问editor了,如:

                ,renderer: function(value, metadata, record, rowIndex, colIndex, store){
                    console.log(this.editor);
// 具体访问data数据方法见Ext.util.Format.comboboxRenderer代码
                    return value;
                }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值