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;//点击后，获得当前checkbox值的相反值 record.set(this.dataIndex, value);//设定checkbox被选择时候的值 //事件的参数 var e = { grid: this.grid, record: record, field: field, originalValue: record.data, value: !record.data, 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
界面：
http://qimo601.72photos.com/client_images/25309/checkbox%E5%88%97.jpg
页:
[1]