Ext.grid.CheckColumn 用法

Ext.grid.CheckColumn源码：

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+'">&#160;</div>';
    }
};

 

例子：

var checkColumn = new Ext.grid.CheckColumn({
       header: "参加?",
       dataIndex: 'flag',
       width: 55
});
	
 var cm = new Ext.grid.ColumnModel([
	 {header:"姓名",dataIndex:"name"},
	 checkColumn
 ]);

var store = new Ext.data.SimpleStore({
	data:[["张三",true],["李四",true],["王五",true],["张三",false],["李四",false],["王五",false]],
	fields:["name","flag"]
});
var grid= new Ext.grid.GridPanel({
	cm:cm,
	plugins:checkColumn,
	store:store,
	title:"选择人员"
});
new Ext.Viewport({
	layout:"fit",
	items:grid
})

 效果：