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

Posted 2023-02-26

【中文标题】When one check column is selected how to make the user not to select other check columns in EXTJS grid panel

【英文标题】：

【发布时间】：2017-02-22 21:01:05

【问题描述】：

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

【参考方案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);

这种方法的另一个好处是可以很容易地拥有多组复选框，您可以在其中设置不同的“checkgroup”值。

【讨论】：

谢谢西奥。如果我想保持其中一个检查列保持不变并且用户只能从其余 3 个检查列中选择一个，该怎么办。你能帮我吗

在您给出的示例中，我希望保持字符串检查列保持不变。（用户可以检查和取消选中此列而不依赖于其余三个）。用户应该只能从数字、日期和布尔检查列中选择一列。

谢谢！ ！！ Theo 但又是一个新问题，我在视图控制器中编写侦听器我收到错误类型错误：记录为空。我正在视图控制器中编写侦听器事件。

Ext.define('Wxample.view.exampleViewController', extend: 'Ext.app.ViewController', 别名: 'controller.examplepanel', onCheckcolumnCheckChange:function(column,rowIndex,checked,record ) var gridHeader = column.up(); var record = me.getViewModel().get('record');//我认为我在这里做错了 gridHeader.items.each(function(col) console. log(col); if(checked && col.xtype==='checkcolumn'&&col!==column &&col.dataIndex!=='taxYesNo') record.set(col.dataIndex,false); ) );

onCheckcolumnCheckChange 获得通过记录，因此您不需要从任何地方获取它，请创建一个小提琴，以便我可以更好地查看代码