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

 ]);  
}

现在，我正在尝试在视图中应用，如下图所示，其中第一个视图包含一个带有填充项目的菜单，现在点击那些项目我要在主页中打开新视图替换主页视图。我怎样才能做到这一点？

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

现在在上面的代码中我只想更改主页并显示关于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

您可以使您的首页组件的行为类似于Ext.Viewport。

来自文档：

Ext.Viewport是使用Ext.setup时创建的实例。因为 Ext.Viewport从Ext.Container扩展，它具有布局（其中默认为Ext.layout.Card）。这意味着您可以在其中添加项目任何时候，从代码中的任何地方。 Ext.Viewport全屏默认情况下配置为true，因此它将占用您的整体屏幕。

你基本上必须给主页layout: 'card'。然后你可以添加视图，就像它是主视口一样。

[编辑]为方便起见，为您的主页容器添加ID：

{
    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

[编辑]您也可以像以前一样动态添加实例化：

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

Answer 2

这就是你的所作所为，但有些事情你需要理解

    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

2 个答案: