EditorGridPanel 中使用checkbox列，并包含afterEdit事件

    在EditorGridPanel中无法使用默认的CheckBox控件，因此采用第三方扩展的控件实现，

    以下是Ext.grid.CheckColu扩展类：

Ext.grid.CheckColumn = function(config){
    Ext.apply(this, config);
    if (!this.id) {
        this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype = {
    init: function(grid){
        this.grid = grid;
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },
    onMouseDown: function(e, t){
        if (t.id == this.id) {
            e.stopEvent();
            var index = this.grid.getView().findRowIndex(t);//行号
            var cindex = this.grid.getView().findCellIndex(t);//列好
            var record = this.grid.store.getAt(index);//行记录
            var field = this.grid.colModel.getDataIndex(cindex);//列名
            var value = !record.data[this.dataIndex];//点击后，获得当前checkbox值的相反值
            record.set(this.dataIndex, value);//设定checkbox被选择时候的值
            //事件的参数
            var e = {
               grid: this.grid,
               record: record,
               field: field, 
               originalValue: record.data[this.dataIndex],
               value: !record.data[this.dataIndex],
               row: index,
               column: cindex
           };

           //afterEdit事件 
           this.grid.fireEvent("afteredit", e); //申请事件，参数        

        }
    },
    renderer: function(v, p, record){
        p.css += ' x-grid3-check-col-td';
        return '<div id="' + this.id + '" class="x-grid3-check-col' + (v ? '-on' : '') + '">&#160;</div>';
    }
};

 

 

   在工程中使用：

   首先创建对象

var checkColumn = new Ext.grid.CheckColumn({   
                   header: "",   
                   dataIndex: 'indoor',   
                   width: 55   
        });  

 

   然后，在editorgrid组件中引入插件plugins:checkColumn（必须的）。

   创建cm加入checkColumn：

cm: new Ext.grid.ColumnModel(   
                                [   
                                checkColumn   
                                ,   
                                {   
                                    id: 'min'  
                                    ,header: '最小值'  
                                    ,dataIndex: 'min'  
                                    ,editor: new Ext.form.NumberField({   
                                        allowBlank: false  
                                    })   
                            )  

 

   创建Record对象也要加入相关内容：

var Record = Ext.data.Record.create([   
             {name: 'indoor', type: 'bool'}   
            ,{name: 'min'}   
            ,{name: 'max'}   
            ,{name: 'alarmType'}   
        ]);  

 

 

   最后创建Record：

var newRecord = new Record({indoor: false,min: min, max: max, alarmType: '轻微'});  

 

 

 

   前台如果调用afterEdit事件

//编辑后触发的事件，有异常，自动选中checkbox   
function afterEdit(e){ 
    //如果是CHECK_EXCEPTION列
    if (e.field == "CHECK_EXCEPTION") {
        //checkbox如果被选中
        if (e.record.get("CHECK_EXCEPTION") == true) 
        {   
            //仓库系统状态为1         
            if(e.record.get("STATE")=="1")
                //设置仓库实际状态为0
                e.record.set("REAL_STATE", "0");
            //仓库实际状态为0
            else if(e.record.get("STATE")=="0")
                //设置仓库实际状态为1
                e.record.set("REAL_STATE", "1");
            else
                e.record.set("REAL_STATE", "");
        }
        //checkbox如果被取消
        else if(e.record.get("CHECK_EXCEPTION") == false)
        {           
            e.record.set("REAL_STATE", "");           
        }
        
   }
}

 

参考文章三篇：

  EXT EditorGridPanel 中使用Ext.grid.CheckColumn （用来创建checkbox列）

  http://blog.csdn.net/davidxj/archive/2009/04/06/4052348.aspx

  Extjs,Ext.grid.CheckColumn 列修正版 （这个afterEdit例子不太好用）

  http://blog.csdn.net/phker/archive/2009/06/25/4294241.aspx

  Ext.grid.CheckColumn问题　（从这篇获得afterEidt例子）

  http://www.vifir.com/bbs/html/20080722/1736736.html

 

 

界面：

评论

3 楼 spring1118 2011-12-28  

贤饭？  

2 楼 qimo601 2010-10-08  

天涯海角tour 写道

你好，你的这个CheckBox控件怎么用啊，你写的我看不懂，我没有接触过extjs不知道怎么样引用 到项目中，你说的 “然后，在editorgrid组件中引入插件plugins:checkColumn（必须的）。
”editorgrid组件在哪啊，而且我在extjs中每个js文件中没有找到Ext.grid.CheckColumn，它在哪定义的啊，还有“以下是Ext.grid.CheckColu扩展类：
”把它单独写成一个JS吗，在我的项目中， var checkColumn = new Ext.grid.CheckColumn({
         header: 'Indoor',
        dataIndex: 'indoor',
         width: 55
       });一直报缺少对象的错，

EXTJS中不自带CheckBox控件的，我第一行就告诉你了，是从网上自己下的一个CheckColu扩展类。第一段JS代码是它的源代码。你在自己工程中直接调用就不会出现缺少对象这个错了。请结合一下我下面的参考文章。

1 楼 天涯海角tour 2010-09-18  

你好，你的这个CheckBox控件怎么用啊，你写的我看不懂，我没有接触过extjs不知道怎么样引用 到项目中，你说的 “然后，在editorgrid组件中引入插件plugins:checkColumn（必须的）。
”editorgrid组件在哪啊，而且我在extjs中每个js文件中没有找到Ext.grid.CheckColumn，它在哪定义的啊，还有“以下是Ext.grid.CheckColu扩展类：
”把它单独写成一个JS吗，在我的项目中， var checkColumn = new Ext.grid.CheckColumn({
         header: 'Indoor',
        dataIndex: 'indoor',
         width: 55
       });一直报缺少对象的错，