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.