改变观点 - Sencha

Posted 2023-02-26

【中文标题】改变观点 - Sencha

【英文标题】：Changing the view - Sencha

【发布时间】：2013-07-31 04:09:30

【问题描述】：

我想改变 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 的另一个视图。 ![第一屏][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] 现在我想要的是我的话在菜单和类别之间。在上图中，您可以看到主页没有被破坏，它是在发布的单词的后面。

【问题讨论】：

全视图是什么意思？或者整个视图中的组件是什么？

整体视图表示外部矩形。

好的，外面的矩形是面板还是什么类型的组件？

是否要将第二个视图替换为已发布的word 视图？

我根据我的理解回答了..很好..你解决了你的问题。

【参考方案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);
     
   

【讨论】：

你的方法可行，但我无法在中心设置主页

你的意思是“在中心”？

你能告诉我这些视图的显示顺序吗？

menu->homepage->categories 和 homepage 始终位于中心，只有 itemTap 中的视图发生变化。而且我最初粘贴了错误的代码，它是面板而不是轮播，您可以查看我编辑的代码。谢谢。

我很难理解你

【参考方案2】：

你可以让你的主页组件表现得像Ext.Viewport。

来自文档：

Ext.Viewport 是您使用 Ext.setup 时创建的一个实例。因为 Ext.Viewport 扩展自 Ext.Container，它具有布局（其中 默认为 Ext.layout.Card）。这意味着您可以在其中添加项目 随时随地在您的代码中。 Ext.Viewport 全屏 配置默认为真，所以它会占用你的整个 屏幕。

你基本上必须给主页一个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' 
]);

【讨论】：

遇到：未捕获的类型错误：无法调用未定义的方法“animateActiveItem”

我的代码不能通过复制粘贴来工作，请尝试理解我的意思并根据您的情况进行定制。无论如何，我进行了编辑以向您展示如何为您的组件提供 id。

我删除了这段代码 homepage.animateActiveItem(view, 'fade');它奏效了。既然我已经接受了回答，就给你投票了

如果您认为@Viswa 更好，我不希望您更改已接受的答案；但仅供参考，如果您想更改答案，因为稍后会有更好的答案，您可以这样做。