當選中一個檢查列時如何讓用戶不要在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」值。