Hot to disable row selection in Ext.JS grid

Question

How do I disable row selection in an Ext.JS grid?

Answer 1

You must set disableSelection property to true. Its value is ignored if a SelectionModel is specified.

For example:

var grid = new Ext.grid.GridPanel({
    disableSelection: true,
    store: new Ext.data.Store({
        reader: reader,
        data: xg.dummyData
    }),
    columns: [
        {id:'company', header: "Company", width: 200, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
        {header: "Change", width: 120, sortable: true, dataIndex: 'change'},
        {header: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
        {header: "Last Updated", width: 135, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ],
    viewConfig: {
        forceFit: true,

//      Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },
    width:600,
    height:300,
    frame:true,
    title:'Framed with Checkbox Selection and Horizontal Scrolling',
    iconCls:'icon-grid'
});

If you want to disable selection of some rows only, you can add a listener to the SelectionModel "beforerowselect" event and return false when you don't want a row to be selected.

Answer 2

use this config if you don't have a selection model for you grid

var grid = new Ext.grid.GridPanel({
    disableSelection: true,
});

else you this little trick to disable selection in the RowSelectionModel

var grid = new Ext.grid.GridPanel({
    selModel : new Ext.grid.RowSelectionModel({selectRow: Ext.emptyFn})
});

Answer 3

you can do another trick for your grid, looks like this :

grid.getSelectionModel().lock();