当选中一个检查列时如何让用户不要在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); 
     } 
    }) 
} 

如果你只想做一定的检查列，您可以随时查询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”值。