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 + '" name="code">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
?
?
界面: