Изменение вида - Сенч

Question

Я хочу, чтобы изменить вид на itemtap и я сделал, что

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' } 

]); 
} 

сейчас, Я пытаюсь его применить в виде, как показано на ниже ПОС, где первый взгляд содержит меню с заселенный элемент, и теперь onclick из этого пункта я хочу открыть новый вид на главной странице, заменяющей HomePage View. Как я могу достичь этого?

контейнер ниже ПОС:

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', 
    },] 
}] 
} 
}); 

Теперь в коде выше я только хочу, чтобы изменить домашнюю страницу и отобразить другой вид относительно itemtap. ! [Firstscreen] [1] И когда я использую код выше для этой ситуации, весь вид изменен, но я просто хочу изменить второй вид относительно itemTap. Спасибо.

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

После этого кода я нахожусь в состоянии загрузить печатное слово, как показано на рисунке ниже! [Result2] [2] Теперь я хочу, чтобы мои слова между меню и категорий , На приведенной выше картинке вы можете видеть, что домашняя страница не разрушена, она возвращается в опубликованное слово.

Answer 1

Это то, что ваш но есть вещи, которые вам нужно понять.

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

Что вам нужно сделать, это

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

Answer 2

Вы можете сделать свой компонент домашней страницы как Ext.Viewport.

Из документов:

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.

Вы в основном должны дать своей домашней страницы layout: 'card'. Затем вы можете добавлять к нему вид, как это было в главном окне.

[EDIT] Дайте домашнюю страницу контейнер идентификатор для удобства:

{ 
    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] Вы можете также добавить инстанцировании на лету, как вы делали раньше:

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