如何完全删除 Grid 及其列答案

【问题标题】：How to completely remove Grid and its Columns如何完全删除 Grid 及其列
【发布时间】：2012-11-14 12:49:10
【问题描述】：

我已经实现了扩展 Ext.grid.Panel 的 Grid A 并实现了一些扩展 Grid A 的其他 Grid。对于所有扩展 Grid A 的网格，我通过它们的 Parent 的构造函数向它们添加了一个额外的列网格（网格 A）

constructor: function() {       

    this.columns.push({
        xtype: 'gridcolumn',
        //id: 'removeColumn',
        header: '',
        sortable: false,
        dataIndex: 'action',
        width: 25,
        renderer: function (action, metaData, record, row, col, store, gridView) {
            if (action == 'add') return icon = '<img style="height: 15px;width: 15px;"  src="images/add.png"/>';
            else return icon = '<img style="height: 15px;width: 15px;"  src="images/close.png"/>';
        }

    });

    this.callParent(arguments);
}

所以上面的代码在网格 A 的所有子网格的末尾添加了一个额外的列。我已经在一个面板上添加了所有这些网格（比如 GridsPanel ），这些网格进一步添加到一个选项卡中。 GridsPanel 是可关闭的（也可以通过按钮在 Tab 中重新添加）。单击关闭按钮时，它会成功关闭，但是每当我将 GridsPanel 重新添加到选项卡时，网格 A 在所有子网格的末尾添加两列。事实是 Grid A 没有添加两列，但是在关闭 GridsPanel 之前添加的列仍然存在并且没有被删除。同样，关闭 GridsPanel 并通过单击按钮再次创建它将向子网格添加另一列，从而使添加的列总数为 3。所以 Constructor 的功能实际上可以正常工作，即它在子网格的末尾添加了一个额外的列，但是在完全破坏网格时存在一些问题。

【问题讨论】：

标签： javascript extjs dom-events extjs4.1 extjs-mvc

【解决方案1】：

我得到了解决方案，并想与其他人分享它，因为它可能会帮助其他人。问题实际上在于在构造函数中每个子网格的末尾添加了额外的列。在网格中添加额外的列 viewready 事件解决了这个问题。

viewready: function(object){

        column = {
            xtype: 'gridcolumn',
            //id: 'removeColumn',
            detachOnRemove : false,
            header: '',
            sortable: false,
            dataIndex: 'action',
            width: 25,
            renderer: function (action, metaData, record, row, col, store, gridView) {
                if (action == 'add') return icon = '<img style="height: 15px;width: 15px;"  src="images/add.png"/>';
                else return icon = '<img style="height: 15px;width: 15px;"  src="images/close.png"/>';
            }

        };

        object.headerCt.insert(object.columns.length, column);
        object.getView().refresh();
}

因此，以这种方式添加列会完全破坏网格及其列。

【讨论】：