extjscheckboxselectionmodelextjs-grid

ExtJs - Checkbox selection model, disable checkbox per row


I have a grid with a checkbox selection model.

Ext.define('Mb.view.ship.OrdersGrid', {
    extend: 'Ext.grid.Panel',
    selType: 'checkboxmodel',
    selModel: {
        injectCheckbox: 0,
        pruneRemoved: false
    },
    ...

There are some rows that shold not be selectable, based on a value in a field.

In a normal column, I can intervene in the display with renderer and hide the cell content with css (metadata.tdCls), but for the auto generated checkbox column, I cannot find a method to disable or hide the checkbox on a row basis.

Does anyone have an idea how to do this ?


Solution

  • You simply use the beforeselect event of the grid. Returning false, will not allow the selection. Check the documentation.

    Ext.define('Mb.view.ship.OrdersGrid', {
        extend: 'Ext.grid.Panel',
        selType: 'checkboxmodel',
        selModel: {
            injectCheckbox: 0,
            pruneRemoved: false
        },
    
        listeners: {
    
            beforeselect: function(grid, record, index, eOpts) {
                if (record.get('yourProperty')) {//replace this with your logic.
                    return false;
                }
            }
    
    }
    ..........
    

    If you really want to hide the checkbox, you could add CSS classes for your grid rows, and using them you could may be hide them. Check this answer for a solution.