Ext js网格删除选择模型

Question

我有一个需要动态添加或删除网格选择模型的情况。

查看文档，我发现选择模型没有 destroy() 方法或类似方法。如何在 ext js 4.x 中从网格中删除或销毁选择模型？

如果无法实现这一点，我仍然可以通过回滚某些功能并动态添加选择模型到 已创建的 网格来实现。但我也不确定是否可行。

- Jacob

---

仅禁用选择不就足够了吗？如果您之后需要再次添加选择模型，为什么要破坏它呢？ - matt

我需要完全从用户界面中隐藏它。 - Jacob

那只是清除当前选择，不是吗？ - matt

是的，但选择模型中的复选框仍将可见... - Jacob

Answer 1

我建议禁用选择模型而不是销毁它。

您可以清除当前选择（deselectAll），并锁定选择模型以防止进一步选择（setLocked）：

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

由于您正在使用复选框选择模型，因此您还需要隐藏添加到网格中的相应列：

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

- matt

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

- rixo