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

qimo601

    在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' : '') + '"> </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
 
 
界面：