How to completely remove Grid and its Columns

Question

I have implemented Grid A which is extending Ext.grid.Panel and implemented some other Grids which are extending Grid A.For all grids which are extending Grid A, I have added an extra column to them through the constructor of their Parent Grid (Grid 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);
}

So the above code adds an extra column in the end of all Child Grids of Grid A. I have added all these grids on a Panel(say GridsPanel ) which are further added in a Tab. The GridsPanel is closable (And also re-addable in Tab through button). On clicking the close button it successfully closes but whenever I re-add the GridsPanel to the tab, Grid A adds two columns in the end of all child grids. The fact is that Grid A does not add two columns but the column added before closing the GridsPanel is still there and it is not removed. Similarly closing the GridsPanel and creating it again through button click will add another column to the child grids bringing the total number of columns added to 3. So the functionality of Constructor is infact working correctly ie it adds an extra column at the end of the child grids but there is some problem in destroying the grids completely.

Answer 1

I got the solution and thought to share it with others as it might help others. The problem was actually in adding the extra column at the end of each child grid in Constructor. Adding the extra column in the grids viewready Event solved the problem.

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();
}

So adding the columns this way destroys the grids and their columns completely.