Когда выбран один столбец проверки, как заставить пользователя не выбирать другие столбцы проверки на панели сетки EXTJS

Question

введите описание изображения здесь у меня есть панель сетки, которая включает в себя 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/

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

Дополнительный бонус этого подхода позволил бы легко иметь несколько наборов флажков, в которых вы устанавливаете различные значения "контрольной группы".