Want to reload ExtJs tab panel each time it is rendered - extjs

Question

I'm creating a set of ExtJs Panels & TabPanel in a jsp page as:
//left panel
var leftpanel = new Ext.Panel({
id :'leftpane',
region:'west',
width: leftPaneDefaultWidth,
layout : 'fit',
header : false,
split:true
});
//right tabpanel
var rightpaneltab = new Ext.TabPanel({
id:'rightpanetabs',
border:false,
enableTabScroll: true,
region:'center'
});
//parent panel
var toppanel = new Ext.Panel({
id : 'main',
layout:'border',
renderTo : 'parentDiv',
items: [ leftpanel , rightpaneltab ]
});
Owing to a business requirement, I need to refresh/reload the contents within the rightpaneltab defined above.
Could someone pls suggest an optimal away of achieving this?

Answer 1

You can listen to events like painted, show, initialize and some others.
Check the documentation here: https://docs.sencha.com/extjs/6.7.0/modern/Ext.tab.Panel.html#event-initialize
initialize - Fires when the component has been initialized
painted - Fires whenever this Element actually becomes visible (painted) on the screen. This is useful when you need to perform 'read' operations on the DOM element, i.e: calculating natural sizes and positioning.
show - Fires whenever the Component is shown
Usage:
//left panel
var leftpanel = new Ext.Panel({
id :'leftpane',
region:'west',
width: leftPaneDefaultWidth,
layout : 'fit',
header : false,
split:true
});
//right tabpanel
var rightpaneltab = new Ext.TabPanel({
id:'rightpanetabs',
border:false,
enableTabScroll: true,
region:'center',
listeners: {
painted: function () {
// reload the content here
}
}
});
//parent panel
var toppanel = new Ext.Panel({
id : 'main',
layout:'border',
renderTo : 'parentDiv',
items: [ leftpanel , rightpaneltab ]
});