关于Extjs gird使用checkbox的方法

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