javascript - Ext js网格删除选择模型

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