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

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

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

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

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

Ext.Viewport — это экземпляр, созданный при использовании Ext.setup. Поскольку Ext.Viewport расширяется от Ext.Container, он имеет макет (по умолчанию Ext.layout.Card). Это означает, что вы можете добавлять в него элементы в любое время из любого места кода. Полноэкранная конфигурация Ext.Viewport установлена ​​по умолчанию, поэтому она будет занимать весь экран.

Вы в основном должны дать Домашней странице 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' }
]);