当一个检查列被 selected 如何让用户不 select EXTJS 网格面板中的其他检查列

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

如果您只想对某些检查列执行此操作，您也可以随时检查数据索引：

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 不是标准 config/property - 但您可以通过这种方式设置自定义属性（只要它们不与真实属性冲突）

然后在你的 onCheckcolumnCheckChange 方法中你可以检查这个：

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

这种方法的一个额外好处是可以轻松拥有多组复选框，您可以在其中设置不同的 'checkgroup' 值。

当一个检查列被 selected 如何让用户不 select EXTJS 网格面板中的其他检查列

When one check column is selected how to make the user not to select other check columns in EXTJS grid panel

extjs

gridpanel

extjs5