How to delete nested panel - extjs

Question

I have a nested panel like:
Ext.define('Demo.view.example', {
extend: 'Ext.panel.Panel',
requires:[
'Ext.toolbar.Paging'
],
xtype: 'demo-view-example',
autoScroll: true,
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
frame: true,
initComponent: function() {
Id = this.Id;
var store = Ext.create('Demo.store.example');
store.proxy.url = store.proxy.url + this.Id;
Ext.apply(this, {
store: store
});
this.items = [],
this.bbar = Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
listeners: {
beforechange: function(obj){
obj.up().removeAll();//to remove its children also
}
}
}),
this.callParent();
},
listeners: {
afterrender: function(obj){
var panel = Ext.create('Demo.view.example1',{
});
obj.add(panel);
obj.doLayout();
}
});
Here, I am adding a panel dynamically.In before change fuction, I am removing the component but It doesnot remove the children (nested panels).
Code for example1:
Ext.define('Demo.view.example1', {
extend: 'Ext.panel.Panel',
xtype: 'demo-view-example1',
autoScroll: true,
defaults: {
frame: false
},
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
initComponent: function() {
this.items = [{
xtype: 'demo-view-example2',
flex:2
}];
this.callParent();
if (this.requestId) {
var requestContainerPanel = Ext.create({
xtype: 'demo-view-example3',
flex: 6
});
this.add(requestContainerPanel);
}
this.doLayout();
}
});
Here, I am adding one static view(example3) and dynamic view(example4) both extends from Ext.panel.Panel
Question:
In view(example) In before Change function, I am removing the component but it only removes obj of example. I want to remove all the views(example,example1,example2,example3). how should I do it.