Когда выбран один столбец проверки, как заставить пользователя не выбирать другие контрольные столбцы в панели сетки 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 Aswell:

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».