Old View appears in Background

Question

Hi All after posting my problem here. code for this is

Ext.define('MyPrj.view.Main', {
extend: 'Ext.Container',
alias: 'widget.mainmenuview',
config: {
activeItem: 1,
width: 710,
margin: '10px auto 0',
layout: {
 type: 'hbox'
},
items: [

{
  flex: 1,
  xtype:'menupage',
  cls: 'menuPage',
},
{
  flex:2,
  xtype:'homepage',
  cls: 'homePage', 

  },

  {
    flex:1,
    xtype:'categorypage',
    cls: 'categoryPage',
  },
  ]
    }
});

After itemTap on Menu i get this result![result][3]

Code of itemTap

if(id == '1'){
console.log("Value of Click--"+id);
var publishedword = { xtype: 'publishedword' }; 

   // I am assuming active item is container, here i am getting Container object
   var outerContainer = Ext.Viewport.getActiveItem(1);

   // removing the second item (index start with 0) 
   outerContainer.down('panel').removeAt(1);

   // replacing second item into publishedword
   outerContainer.down('panel').insert(1, publishedword);
   outerContainer.getAt(1).setActiveItem(publishedword);
 }

My result was supposed to be:

![result expected][4] Thank You for Help.

Answer 1

First of all - why are you using container for mainmenuview instead of tabpanel?

Now to your code:

   var outerContainer = Ext.Viewport.getActiveItem(1);

getActiveItem() does not support an index. activeItem should be the mainmenuview

   outerContainer.down('panel').removeAt(1);

if menupage, homepage, ... are panels then inside that panel you would remove the second item (remember that you are removing the item before you add an item)

   outerContainer.down('panel').insert(1, publishedword);

now you are inserting the published word

   outerContainer.getAt(1).setActiveItem(publishedword);

And here you are setting Active Item not to the panel, where you removed and added items, but to the first item inside the outercontainer, which does not neccessarily what you where trying to address.

Answer 2

I solved by using :

removeInnerAt(index);

as said in by @TDeBailleul I used it as:

panel.removeInnerAt(0);
var publishedword = { xtype: 'publishedword' }; 
panel.insert(0, publishedword);

Hope it may help some one.