如何在Sencha Touch中显示卡片布局的第二项

Question

我有3张卡片布局的卡片项目，如果我从与第二张卡片项目相关的其他视图中点击，那么我想显示第二张卡片项目，但是无法翻转正面，只能用两张卡片向后侧面翻转第1和第3。

这是我的代码：

Ext.define('MyApp.view.Main', {
 extend: 'Ext.carousel.Carousel',
 requires: ['Ext.TitleBar'],
 alias: 'widget.mainmenuview',
 config: {
   layout: {
     type: 'card',
   },
   indicator: false,    
   items:[
   {
    xtype:'firstpage',
    cls: 'firstpage', 
    scrollable: false,   
   },
   {
    xtype:'secondpage',
    cls: 'secondpage',    
   },
   {
    xtype:'thirdpage',
    cls: 'thirdpage',

   },

   ]

 }//end of config
});

这是我的卡片布局。在这里，我想显示卡片项目的 secondpage 。它通过这样做显示确定，但无法转到之前的卡片，这将会回来。

Ext.define('MyApp.view.Main', {
     extend: 'Ext.carousel.Carousel',
     requires: ['Ext.TitleBar'],
     alias: 'widget.mainmenuview',
     config: {
       layout: {
         type: 'card',
       },
       indicator: false,    
       items:[
 {
        xtype:'secondpage',
        cls: 'secondpage',    
       },
       {
        xtype:'firstpage',
        cls: 'firstpage', 
        scrollable: false,   
       },

       {
        xtype:'thirdpage',
        cls: 'thirdpage',

       },

       ]

     }//end of config
    });

我知道，在cardlayout中，首先显示卡片项目，但在我的情况下。加载 Main.js 文件时显示第二项（第二页）。并翻转两侧，正面首页显示和背面第三页显示。

如何做到这一点，请指导我。谢谢。

修改

我解决了这个问题但是在获得第二项时，为什么要加载第一项然后第二项。这意味着每当显示第二项时，几秒钟就会显示第二项。

Ext.define('MyApp.view.MenuSwipTest', {
 extend: 'Ext.carousel.Carousel',
 requires: ['Ext.TitleBar'],
 alias: 'widget.menuswip',
 config: {
 // activeItem: 1,
 layout: {
   type: 'fit', 
 },
 indicator: false, 
 items:[
 {
  xtype:'homepage',
  cls: 'homePage', 
    //scrollable: false,   
  },
  {
    xtype:'menupage',
    cls: 'menuPage', 
  },

  {
    xtype:'categorypage',
    cls: 'categoryPage',
  },
   ]
},
initialize : function(){ 
  console.log('launch Menu Test'); 
  this.setActiveItem(1);
 },//end of config
});

我也在配置中尝试使用activeItem：1，但没有任何变化。

Answer 1

就像这样..使用setActiveItem();

   var main = Ext.create('widget.mainmenuview');

    if(condition) {
       main.setActiveItem(1);
    }

Answer 2

在您的轮播配置中使用此属性：

config: {
  // .... other config properties ...
  activeItem: 1
}