Load Panel from click of list in TabPanel in MVC Pattern

[dev3]

I have code in my app as bellow in which i load list within tabpanel on load

app.js
launch: function() {
Ext.Viewport.add(Ext.create('App.view.Test1'));


}

Initview.js
Ext.define('App.view.Test1', {
extend: 'Ext.TabPanel',
alias:'widget.MainTb',
id:'MainTb',
config: {
fullscreen: true,
ui:'TabUI',
tabBar:{
docked: 'bottom', // will put the menu on the bottom of the screen
layout:{
pack: 'center' // this will center the menu
}

},
items:[{

iconCls: "list",
xtype:'list',
id:"Menulist",
title: '<span style="color:#886846;font-size:14px;">Menu</span>',
pinHeaders:false,
store:{
fields: ['MainMenu'],
data:[
{MainMenu:'ROLL SPECIAL'},
{MainMenu:'SUSHI/SASHIMI'},

]
},
itemTpl: '<div width="100%">{MainMenu}</div>',
scrollable : 'vertical',
listeners:
{
select: function(view, record) {
OnMainMenuClick(record);
}
},
onItemDisclosure:function(record,btn,index)
{
OnMainMenuClick(record);
}

}
]

On click of list item i need to load another list / viewport



function OnMainMenuClick(record)
{
//MainTb.hide();
//MenuItem.show();
Ext.Viewport.remove('App.view.Test1');
Ext.Viewport.add(Ext.create('App.view.MenuItem'));
mode ='MenuItem';
SetItemSubMenuDetails(record.get('MainMenu'));

}


but it do nothing, and on second click gives message
[WARN][Ext.Component#constructor] Registering a component with a id (`MenuItem`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`.

please help me how can i do this ?

[mitchellsimoens]

What is App.view.MenuItem?