EXT EditorGridPanel 中使用Ext.grid.CheckColumn

在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.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1) { e.stopEvent(); var index = this.grid.getView().findRowIndex(t); var record = this.grid.store.getAt(index); record.set(this.dataIndex, !record.data[this.dataIndex]); } }, renderer : function(v, p, record) { p.css += ' x-grid3-check-col-td'; return '

 

'; } }

 

在工程中使用：

首先创建对象

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: '轻微'});