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

        最近突然有这样的需求:当 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);
     };

    最后结果:

    

    

      最后发现有个小缺点,多个选择了之后不能再重新选择其他的了.我们应该在record中有一个专门的字段存放原始值(比如:rawValue:'default,red',该rawValue不会被改变),不应该直接操作value.