Ext.grid.column.Check click event to the CheckBox itself not the whole cell area

Question

Is there any to way to restrict check column action to only check box and restrict to the cell area. sample code for check column which i have copied from docs.

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone', 'active'],
    data: [{
        name: 'Lisa',
        email: '[email protected]',
        phone: '555-111-1224',
        active: true
    }, {
        name: 'Bart',
        email: '[email protected]',
        phone: '555-222-1234',
        active: true
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244',
        active: false
    }, {
        name: 'Marge',
        email: '[email protected]',
        phone: '555-222-1254',
        active: true
    }]
 });

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    store: store,
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }, {
        xtype: 'checkcolumn',
        text: 'Active',
        dataIndex: 'active'
    }]
});

Kindly help me on this.

Answer 1

This solution will work on every version of ExtJS from 4.2.0 to 4.2.6.

Ext.define('CheckColumn', {
    override: 'Ext.grid.column.' + (!!Ext.grid.column.Check ? 'Check': 'CheckColumn'),
    processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {
        var me = this,
            key = type === 'keydown' && e.getKey(),
            mousedown = type == 'mousedown';

        if (mousedown && !Ext.fly(e.getTarget()).hasCls('x-grid-checkcolumn')) {
            return !me.stopSelection;
        }

        me.callParent([type, view, cell, recordIndex, cellIndex, e, record, row]);
    }
});