如何完全删除网格及其列

时间:2012-11-14 12:49:10

标签: javascript javascript-events extjs4.1 extjs-mvc

我已经实现了网格A,它扩展了Ext.grid.Panel并实现了一些扩展网格A的其他网格。对于所有正在扩展网格A的网格,我通过其父节点的构造函数向它们添加了一个额外的列网格(网格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的所有子网格的末尾添加了一个额外的列。我已经在Panel(例如GridsPanel)中添加了所有这些网格,这些网格将进一步添加到Tab中。 GridsPanel是可关闭的(并且还可以通过Tab键重新添加)。单击关闭按钮时,它成功关闭,但每当我将GridsPanel重新添加到选项卡时,网格A在所有子网格的末尾添加两列。事实是,网格A不会添加两列,但在关闭GridsPanel之前添加的列仍然存在且未被删除。      类似地,关闭GridsPanel并通过按钮单击再次创建它将向子网格添加另一列,使添加的列总数增加到3。      因此,构造函数的功能实际上正常工作,即它在子网格的末尾添加了一个额外的列,但在完全破坏网格时存在一些问题。

1 个答案:

答案 0 :(得分:0)

我得到了解决方案,并考虑与其他人分享,因为它可能会帮助其他人。问题实际上是在构造函数中的每个子网格的末尾添加额外的列。在网格中添加额外列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();
}

因此,以这种方式添加列会彻底破坏网格及其列。