Remove ability to select specific rows in grid ExtJS 4

Question

I have to remove ability to select some rows in my grid.

I use CheckboxModel

selModel: Ext.create( 'Ext.selection.CheckboxModel', {
    mode: 'SIMPLE'
} )

To disable selection I use beforeselect event

beforeselect: function ( row, model, index ) {
    if ( model.data.id == '3' ) {
        return false;
    }
}

And to hide checkbox I use specific class for row and css rule

viewConfig: {
    getRowClass: function( record, index ) {
        var id = record.get('id');
        return id == '3' ? 'general-rule' : '';
    }
}

.general-rule .x-grid-row-checker {
    left: -9999px !important;
    position: relative;
}

Perhaps this is not the best way to achieve the desired result, but for my task it works.

However, another problem appear: Select All / Unselect All checkbox in grid header stops working. When you first click on this ckechbox all lines except those that should not be selected will select, but if you click again, nothing happens. Obviously, the system tries to re-select all rows, as there are unselected.

Is there a better way to solve the problem? Or how to solve a problem with this method.

The only thing that comes to mind - you need to rewrite the Select All / Unselect All functions for checkbox, but I not sure how I can do it.

Thanks in advance for your answers and I apologize if I made my question is not according to the rules.

Answer 1

The final solution for my task (remove the ability to choose a specific row by its id) is as follows:

Override selectAll (and unselectAll if needed) method when you define selection model to ignore spicified rows:

selModel: Ext.create( 'Ext.selection.CheckboxModel', {
    mode: 'SIMPLE',
    select: function(records, keepExisting, suppressEvent) {
        if (Ext.isDefined(records)) {
            this.doSelect(records, keepExisting, suppressEvent);
        }
    },
    selectAll: function( suppressEvent ) {
        var me = this,
            selections = me.store.getRange();

        for( var key in selections ) {
            if( selections[key].data.id == '3' ) {
                selections.splice( key, 1 );
                break;
            }
        }

        var i = 0,
            len = selections.length,
            selLen = me.getSelection().length;

        if( len != selLen ) {
            me.bulkChange = true;
            for (; i < len; i++) {
                me.doSelect(selections[i], true, suppressEvent);
            }
            delete me.bulkChange;

            me.maybeFireSelectionChange(me.getSelection().length !== selLen);
        }
        else {
            me.deselectAll( suppressEvent );
        }
    }
} )

Use beforeselect event to disable selection for specified rows:

beforeselect: function ( row, model, index ) {
    if ( model.data.id == '3' ) {
        return false;
    }
}

Use a special class for the specified rows and the corresponding css rule to hide specified rows:

viewConfig: {
    getRowClass: function( record, index ) {
        var id = record.get('id');
        return id == '3' ? 'general-rule' : '';
    }
}

.general-rule .x-grid-row-checker {
    left: -9999px !important;
    position: relative;
}

Thanks Evan Trimboli for advice!