EXTJS：如何将监听器添加到动态添加到网格的复选框

Question

我正在使用网格中包含多个复选框列的网格。复选框的状态（选中或未选中）基于网络服务响应。

我添加了两个复选框列，如下所示，

        // Column 1
        {
                text : 'Column1',
                dataIndex : 'Column1',
                align: 'center',
                renderer: function(value, meta, record, rowIndex, colIndex) {
                    if(record != null && record.get('text') === 'col1') {
                        value = '<input type = "checkbox" checked />';
                    } else {
                        value = '<input type = "checkbox" />';
                    }
                    return value;
                }

            },
          // Column 2
            {
                text : 'Column2',
                dataIndex : 'Column2',
                align: 'center',
                renderer: function(value, meta, record, rowIndex, colIndex) {
                    if(record != null && record.get('text') === 'col2') {
                        value = '<input type = "checkbox" checked />';
                    } else {
                        value = '<input type = "checkbox" />';
                    }
                    return value;
                }

            },

现在，如果选中第 1 列，我必须禁用第 2 列，反之亦然。我尝试使用 checkcolumn，但它没有按预期工作。

我不确定如何将侦听器关联到列渲染中的复选框。

任何帮助指示都会很棒。

Answer 1

你应该选择 checkbox column。它将为您节省大量工作。您需要的是事件checkchange。选中一列后，您取消选中另一列，反之亦然

columns: [{
    xtype: 'checkcolumn',
    dataIndex: 'ac1',
    text: 'MyCheck',
    listeners: {
        checkchange: 'onCheckcolumnCheckChange'
    }
}, {
    xtype: 'checkcolumn',
    dataIndex: 'ac2',
    text: 'MyCheck1',
    listeners: {
        checkchange: 'onCheckcolumnCheckChange2'
    }
}, {
    xtype: 'gridcolumn',
    dataIndex: 'text',
    text: 'String'
}],

onCheckcolumnCheckChange: function (checkcolumn, rowIndex, checked, record, eOpts) {
    // first checkbox is checked
    if (checked) {
        // uncheck the second checkbox
        record.set('ac2', false)
    }
},

onCheckcolumnCheckChange2: function (checkcolumn, rowIndex, checked, record, eOpts) {
    //second column is checked
    if (checked) {
        // uncheck the first checkbox
        record.set('ac1', false)
    }
}

https://fiddle.sencha.com/#view/editor&fiddle/1lsj

disabling/enabling 单元格的解决方案：

onCheckcolumnCheckChange: function (checkcolumn, rowIndex, checked, record, eOpts) {
    // we need to get a grids view
    var view = Ext.first('#MySpecialGridId').getView();
    var cell = view.getCell(rowIndex,1);

    if (checked) {
        // add disable CSS to a cell
        cell.addCls(this.disabledCls);
    }else{
        // let's say we wan to enable the
        cell.removeCls(this.disabledCls)
    }

},

https://fiddle.sencha.com/#view/editor&fiddle/1lvm

EXTJS：如何将监听器添加到动态添加到网格的复选框

EXTJS: How to add listerners to the checkbox added to the grid dynamically

html

javascript

extjs

sencha-touch

extjs5