Extjs,Ext.grid.CheckColumn 列修正版_extjs checkcolumn 单击事件-优快云博客

本文链接：https://blog.youkuaiyun.com/phker/article/details/4294241

本文介绍了一种在ExtJS框架中自定义CheckColumn的方法，实现了单元格点击切换状态及触发'afteredit'事件的功能。该实现允许在表格中通过鼠标操作改变复选框的状态，并能获取到改变前后的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*郑桂良修改,添加了触发'afteredit'事件的功能

*/
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 v=this.grid.getView();
            var rowIndex = v.findRowIndex(t);
            var columnIndex = v.findCellIndex(t);
            var record = this.grid.store.getAt(rowIndex);
            var value= !record.data[this.dataIndex];
            record.set(this.dataIndex, value);
            this.grid.fireEvent('afteredit',this.grid,record,this.dataIndex,value,!value,rowIndex,rowIndex)
        }
    },
    renderer : function(v, p, record){
        p.css += ' x-grid3-check-col-td';
        return '<div id="'+ this.id +'" class="x-grid3-check-col'+(v?'-on':'')+'"> </div>';
    }
};