Ext js grid удалить модель выбора

Question

У меня есть ситуация, когда мне нужно динамически добавлять или удалять сетки выбора модели.

При поиске документации я вижу, что модель выбора не имеет destroy() метод или что-нибудь подобное. Как я могу удалить или уничтожить модель выбора из сетки в ext js 4.x.?

Если это невозможно, у меня все еще есть возможность вернуть некоторые функциональные возможности и динамически добавить модель выбора в уже созданную сетку. Но я также не уверен, возможно ли это.

Answer 1

Я бы предложил отключить модель выбора, а не уничтожать ее.

Вы можете очистить текущий выбор (deselectAll) и заблокируйте модель выбора, чтобы предотвратить дальнейший выбор (setLocked):

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

Поскольку вы используете модель выбора флажка, вам также нужно скрыть соответствующий столбец, который добавляется в сетку:

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

Answer 2

Выбор моделей не предназначен для замены, так что... это будет сложно!

Вам нужно будет воспроизвести инициализацию sel-модели, подключить предыдущую и подключить новую...

Вот пример, который работает при замене модели выбора строки на модель флажка. Это может все еще содержать утечки памяти от слушателей, зарегистрированных первой моделью выбора, которую я бы забыл. Создание новой модели выбора основывается на getSelectionModel метод сетки, который реализует disableSelection, simpleSelect, а также multiSelect варианты сетки ( см. код).

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'
    }]
});