更改视图-Sencha [英] Changing the view - Sencha

问题描述

我想更改关于itemtap的视图，而我已经完成

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

 ]);  
}

现在， 我正在尝试将其应用到如下图所示的视图中，其中第一个视图包含一个包含已填充项目的菜单，现在这些项目的onclick我想在Homepage中替换HomePage View来打开新视图. 我该如何实现?

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?

下面图片的容器:

 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的第二个视图. 谢谢.

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.

已编辑

  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] 现在我想要的是我的话语"介于菜单和类别之间.在上图中，您可以看到主页没有被破坏，它出现在发布的单词后面.

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.

推荐答案

这是您的工作，但是您需要了解一些事情

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

您需要做的是

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

这篇关于更改视图-Sencha的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！