Ext js grid remove selection model

Question

I have a situation where I need to dynamically add or remove grids selection model.

Searching the documentation I see that the selection model doesn't have a destroy() method or anything similar. How can I remove or destroy a selection model from a grid in ext js 4.x.?

If this is not possible I still have an option to revert some functionallity and dynamically add the selection model to an already created grid. But I'm also not sure if this is possible.

Wouldn't it be enough to just disable the selection? Why destroy the selection model if you'd need to add it again anyway? — matt, Mar 03 '14 at 09:15
Yes but the checkboxes from the selection model will still be visible.... — Jacob, Mar 03 '14 at 09:28

score 4 · Answer 1 · answered Mar 03 '14 at 09:57

I'd suggest to disable the selection model instead of destroying it.

You can clear the current selection (deselectAll) and lock the selection model to prevent further selection (setLocked):

selModel.deselectAll();
selModel.setLocked(true);

As you're using a checkbox selection model, you'll also need to hide the corresponding column which is added to the grid:

grid.headerCt.child('gridcolumn[isCheckerHd]').hide();

score 3 · Answer 2 · answered Mar 03 '14 at 10:19

Selection models are not designed to be replaced, so... it's gonna be complicated!

You'd have to reproduce the initialization of the sel model, unwire the previous one, and rewire the new one...

Here's an example that works in substituting a row selection model for a checkbox model. It may still contains memory leaks from listeners registered by the first selection model that I would have forgot. The creation of the new selection model relies on the getSelectionModel method of the grid, which implements the disableSelection, simpleSelect, and multiSelect options of the grid (see the code).

Ext.widget('grid', {
    renderTo: Ext.getBody()
    ,store: ['Foo', 'Bar', 'Baz']
    ,selType: 'checkboxmodel'
    ,columns: [{
        dataIndex: 'field1'
        ,text: "Name"
    }]
    ,listeners: {
        selectionchange: function(sm, records) {
            var grid = sm.view.up(),
                item = grid.down('tbtext');
            if (records.length) {
                item.setText(
                    'Selection: ' + Ext.pluck(Ext.pluck(records, 'data'), 'field1').join(', ')
                );
            } else {
                item.setText('No selection');
            }
        }
    }
    ,tbar: [{
        text: "Replace selection model"
        ,handler: function(button) {
            var grid = button.up('grid'),
                headerCt = grid.headerCt,
                checkColumn = headerCt.down('[isCheckerHd]'),
                view = grid.view,
                previous = grid.selModel,
                sm;
            // try to clean up
            previous.deselectAll();
            previous.destroy();
            // sel model doesn't clear the listeners it has installed in its
            // destroy method... you'll have to chase the listeners that are
            // installed by the specific type of sel model you're using
            if (previous.onRowMouseDown) {
                view.un('itemmousedown', previous.onRowMouseDown, previous);
            }
            if (previous.onRowClick) {
                view.un('itemclick', previous.onRowClick, previous);
            }
            // clear references
            delete grid.selModel;
            delete view.selModel;
            // create another selModel
            grid.selType = 'rowmodel';
            //grid.disableSelection = true;
            sm = grid.getSelectionModel();
            // assign new sel model
            view.selModel = sm;
            sm.view = view;
            // remove checkbox model column
            if (checkColumn) {
                headerCt.remove(checkColumn);
            }
            // init sel model is trigerred in view render events, so we must do it
            // now if the view is already rendered
            if (view.rendered) {
                sm.beforeViewRender(view);
                sm.bindComponent(view);
            }
            // finally, refresh the view
            view.refresh();
        }
    }]
    // a place to display selection
    ,bbar: [{
        xtype: 'tbtext'
        ,text: 'No selection'
    }]
});

Ext js grid remove selection model

2 Answers2