Changing the view - Sencha

Question

I want to change view on itemtap and i have done that

itemtap : function(list, index, target, record, event) {
 var id = index + 1;
if(id == '1'){
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);  
Ext.Viewport.add([

 { xtype: 'publishedword' }

 ]);  
}

now, I am trying it to apply in view as shown in below pic where 1st view contains an Menu with populated item and now onclick of those item I want to open new view in Homepage replacing HomePage View. How can i achieve this?

Container for below pic:

 Ext.define('myprj.view.Main', {
 extend: 'Ext.Container',
 alias: 'widget.mainmenuview',

 config: {

 width: 710,
 margin: '10px auto 0',
 layout: {
 type: 'hbox'
 },
defaults: {
  flex: 1
},
activeItem: 1,
items: [{
flex: 1,
xtype: 'container',
cls:'wholeMenuWrap',
margin: '65px 0 0 0',
width: 170,
layout: 'vbox', 

  items: [
  {
    xtype:'menupage',
    cls: 'menuPage',
    docked: 'left',    
  },
   {
    xtype:'homepage',
    cls: 'homePage', 
    //docked: 'center',
  },

  {
    xtype:'categorypage',
    cls: 'categoryPage',
    docked: 'right',
  },]
}]
}
});

Now in the above code i only want to change homepage and display another view with respect to itemtap. ![firstscreen][1] And when i use above code for this situation whole view is changed but i just want to change 2nd view with respect to itemTap. Thank You.

EDITED

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

After this code i am able to load published word as shown in below picture![result2][2] Now i want is My Words to be in between Menu and categories. In the above picture you can see homepage is not destroyed it's coming in back of published word.

Answer 1

You could make your Homepage component behave like Ext.Viewport.

From the docs:

Ext.Viewport is a instance created when you use Ext.setup. Because Ext.Viewport extends from Ext.Container, it has as layout (which defaults to Ext.layout.Card). This means you can add items to it at any time, from anywhere in your code. The Ext.Viewport fullscreen configuration is true by default, so it will take up your whole screen.

You basically have to give Homepage a layout: 'card'. Then you can add views to it like it was the main Viewport.

[EDIT] Give your homepage container an id for convenience:

{
    id: 'homepage',
    xtype:'homepage',
    cls: 'homePage',
    //docked: 'center',
    layout: 'card'
},

var view = Ext.getCmp("viewId");          // replace this code with the code to
                                          // get the view you actually want
                                          // to add

var homepage = Ext.getCmp("homepage");    // get it by the id we set before
homepage.animateActiveItem(view, 'fade'); // you can animate a transition
homepage.add(view);                       // or just add it

[EDIT] You can also add instantiating on the fly like you were doing before:

homepage.add([
    { xtype: 'publishedword' }
]);

Answer 2

This what your doing, but there are things you need to understand

    itemtap : function(list, index, target, record, event) {
     var id = index + 1;
     if(id == '1'){

        //This line will remove the whole container, but that's not you want
        Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true); 

        //This line will add publishedword conponent into viewport not carousel
        Ext.Viewport.add({ xtype: 'publishedword' });  
     }
   }

What you need to do is

    itemtap : function(list, index, target, record, event) {
     var id = index + 1;
     if(id == '1'){
       var publishedword = { xtype: 'publishedword' }; 

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

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

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