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 '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </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: '轻微'});