Question

我正在使用网格中的多个复选框列。复选框的状态（选中或取消选中）基于Web服务响应。

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

        // 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

禁用/启用单元格的解决方案：

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：如何将listerners添加到动态添加到网格中的复选框

1 个答案: