当前位置：首页 > article >正文

细粒度更换Ext的EditorGridPanel的每个单元格编辑器

article 2025/9/17 16:09:43

最近突然有这样的需求:当 EditorGridPanel 的每个单元格在进入编辑状态的时候,要根据数据的不同,有不同的编辑器展示(ComboBox或者TextField等).因为EditorGridPanel操作的编辑器最细粒度是列(看了API,不知道是否看漏),那么怎么能更细粒度地去更改到每个Cell里面的Editor呢? 这是我下面要演示的.

首先我们看 Ext ColumnModel里面有个方法 getCellEditor .它是在每个单元格点击进入编辑状态的时候去获取编辑器的,查看下它的源码 getCellEditor : function(colIndex, rowIndex) { return this.config[colIndex].getCellEditor(rowIndex); };

Okay,既然是这样,那么我们就在这个方法上进行拓展.

先来点假数据:

       var myData = [
      ['Home page',          'default'],
        ['News page', 'blue,red,default'],
        ['Login page',        'blue,red'],
        ['User page',          'default'],
          ['Info page', 'blue,red,default'],
        ['Jobs page', 'blue,red,default'],
          ['Connection','blue,red,default'],
          ['Salary',             'default'],
        ['UserCenter',         'default'],
          ['Nemours and Company','default'],
          ['The CoCompany',      'default']
       ];


      var store = new Ext.data.ArrayStore({
        fields:
            [
               {name: 'page'},
               {name: 'css'},
            ]
      });

       页面展示:

如图,我要的是在点击 page-css的时候,当有多个值的时候展示的是下拉框,不是TextField.但是其他的单元格的编辑器却不变.

我们先看下原生的getCellEditor方法返回的是什么(console.info(grid.getColumnModel().getCellEditor(1,1));):

它返回的是 Ext.grid.GridEditor对象,okay,那么我们手动去造这个对象.

先去看下Ext.grid.GridEditor的构造函数是什么样子:

      Ext.grid.GridEditor = function(field, config){
       Ext.grid.GridEditor.superclass.constructor.call(this, field, config);
   field.monitorTab = false;
   };

已经基本成型了,把上面的所有组合起来,getCellEditor方法的代码可以这样子写:

grid.getColumnModel().getCellEditor=function(colIndex, rowIndex)
     {
        var record = grid.getStore().getAt(rowIndex);
        var csss= record.data.css;
        var cssArray=csss.split(',');
        if(cssArray.length>1)
        {
           var data=[];
           for(var i =0;i<cssArray.length;i++)
           {
               var d =[];
               d.push(cssArray[i]);
               data.push(d);
           }
           var combo =
              new Ext.form.ComboBox({
             typeAhead: true,
             triggerAction: 'all',
            lazyRender:true,
                mode: 'local',
                store: new Ext.data.ArrayStore({
                   id: 0,
                 fields: [
                      'val'
                     ],
                   data: data
              }),
               valueField: 'val',
               displayField: 'val'
           });
           return new Ext.grid.GridEditor(combo,{});
        }
        return grid.getColumnModel().config[colIndex].getCellEditor(rowIndex);
     };

最后结果: