Question

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

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

如果无法做到这一点，我仍然可以选择恢复某些功能并动态地将选择模型添加到已经创建的网格中。但我也不确定这是否可能。

Answer 1

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

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

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

当您使用复选框选择模型时，您还需要隐藏添加到网格中的相应列：

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

Answer 2

选择模型不是为了替换而设计的，所以...它会变得复杂！

你必须重现sel模型的初始化，将前一个模型解除连线，然后重新连接新模型......

这是一个example，用于将行选择模型替换为复选框模型。它可能仍然包含我将忘记的第一个选择模型注册的侦听器的内存泄漏。新选择模型的创建依赖于网格的getSelectionModel方法，该方法实现网格的disableSelection，simpleSelect和multiSelect选项（{{3} }）。

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网格删除选择模型

2 个答案: