2

我想改变 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' }

 ]);  
}

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

下图的容器：

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

已编辑

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

4

2 回答 2

1

你可以让你的 Homepage 组件表现得像Ext.Viewport.

从文档：

Ext.Viewport 是您使用 Ext.setup 时创建的实例。因为 Ext.Viewport 从 Ext.Container 扩展而来，所以它具有布局（默认为 Ext.layout.Card）。这意味着您可以随时从代码中的任何位置向其中添加项目。Ext.Viewport 全屏配置默认为 true，因此它将占据您的整个屏幕。

您基本上必须给 Homepage 一个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' }
]);
于 2013-07-31T06:55:27.230 回答
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);
     }
   }
于 2013-07-31T07:08:18.767 回答