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

Question

enter image description hereI have a grid panel which includes 4 check columns.

Three of the columns need to act like radio options; when the user checks one column they should not be able to check the other two columns.

The fourth column should be independent and unaffected by the other three.

I am using ExtJs version 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

I don't think you can disable, and what you probably mean is uncheck?

If so you seem to be half way there, I would use listeners on your check columns e.g.

See it in action here: 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);
        }
    })
}

If you want to only do this to certain check columns you can always check the 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);
        }
    })
}

A nicer way to do this (particularly if you want have several additional check columns that are not unset when others are checked) would be to add a custom property to your columns and then check this.

{
    xtype: 'checkcolumn',
    dataIndex: 'date',
    text: 'Date',
    checkgroup: 'threecols',
    listeners: {
        checkchange: 'onCheckcolumnCheckChange'
    }
},

Note checkgroup is not a standard config/property - but you can set custom properties this way (as long as they don't clash with real ones)

Then in your onCheckcolumnCheckChange method you can check this:

if (checked && col.checkgroup && col.checkgroup === column.checkgroup && col.xtype === 'checkcolumn' && col !== column) {
    record.set(col.dataIndex, false);
}

An additional bonus of this approach would make it easy to have multiple sets of checkboxes, where you set different 'checkgroup' values.