Question

enter image description here我有一个网格面板，其中包含4个检查列。

其中三列需要像无线电选项那样行事;当用户检查一列时，他们应该无法检查其他两列。

第四列应该是独立的，不受其他三列的影响。

我正在使用ExtJs版本5.1

Ext.define('MyApp.view.MyGridPanel', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.mygridpanel',

    requires: [
        'MyApp.view.MyGridPanelViewModel',
        'MyApp.view.MyGridPanelViewController',
        'Ext.grid.column.Check',
        'Ext.view.Table'
    ],

    controller: 'mygridpanel',
    viewModel: {
        type: 'mygridpanel'
    },
    height: 250,
    width: 400,
    title: 'My Grid Panel',

    columns: [
        {
            xtype: 'checkcolumn',
            dataIndex: 'string',
            text: 'String'
        },
        {
            xtype: 'checkcolumn',
            dataIndex: 'number',
            text: 'Number',
            listeners: {
                checkchange: 'onCheckcolumnCheckChange'
            }
        },
        {
            xtype: 'checkcolumn',
            dataIndex: 'date',
            text: 'Date'
        },
        {
            xtype: 'checkcolumn',
            dataIndex: 'bool',
            text: 'Boolean'
        }
    ]
});

Answer 1

我认为你不能禁用，你可能意味着取消选中？

如果是这样，你似乎在那里，我会在你的支票栏上使用听众，例如

在此处查看此行动：https://fiddle.sencha.com/#view/editor&fiddle/1qpr

onCheckcolumnCheckChange:function(column,rowIndex,checked,record){
    var gridHeader = column.up();
    gridHeader.items.each(function(col){
        if(checked && col.xtype==='checkcolumn'&&col!==column){
            record.set(col.dataIndex,false);
        }
    })
}

如果您只想对某些检查列执行此操作，您可以随时检查dataIndex：

onCheckcolumnCheckChange:function(column,rowIndex,checked,record){
    var gridHeader = column.up();
    gridHeader.items.each(function(col){
        if(checked && checked.dataIndex!='other' && col.xtype==='checkcolumn'&&col!==column){
            record.set(col.dataIndex,false);
        }
    })
}

一种更好的方法（特别是如果你想要在检查其他列的情况下有几个额外的检查列时）将向你的列中添加一个自定义属性，然后检查它。

{
    xtype: 'checkcolumn',
    dataIndex: 'date',
    text: 'Date',
    checkgroup: 'threecols',
    listeners: {
        checkchange: 'onCheckcolumnCheckChange'
    }
},

注意checkgroup不是标准配置/属性 - 但您可以通过这种方式设置自定义属性（只要它们不与真实属性冲突）

然后在onCheckcolumnCheckChange方法中，您可以查看：

if (checked && col.checkgroup && col.checkgroup === column.checkgroup && col.xtype === 'checkcolumn' && col !== column) {
    record.set(col.dataIndex, false);
}

此方法的另一个好处是可以轻松拥有多组复选框，您可以在其中设置不同的“检查组”。值。

选择一个检查列时，如何使用户不要在EXTJS网格面板中选择其他检查列

1 个答案: