Question

是否可以将检查列操作限制为仅复选框并限制到单元格区域。我从文档中复制的检查列的示例代码。

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone', 'active'],
    data: [{
        name: 'Lisa',
        email: 'lisa@simpsons.com',
        phone: '555-111-1224',
        active: true
    }, {
        name: 'Bart',
        email: 'bart@simpsons.com',
        phone: '555-222-1234',
        active: true
    }, {
        name: 'Homer',
        email: 'homer@simpsons.com',
        phone: '555-222-1244',
        active: false
    }, {
        name: 'Marge',
        email: 'marge@simpsons.com',
        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'
    }]
});

请帮助我。

Answer 1

此解决方案适用于从4.2.0到4.2.6的每个版本的ExtJS。

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]);
    }
});

Answer 2

基于Guiherme lopes的回答我已经在beforecheckchange中应用了修复。

 beforecheckchange: function(me , rowIndex , checked , record , e , eOpts){
           if(!Ext.fly(e.getTarget()).hasCls('x-grid-checkcolumn')){
              return false;
            }
            return true;
        }

Ext.grid.column.Check单击事件到CheckBox本身而不是整个单元格区域

2 个答案: