如何在sencha touch 2中获取当前活动的轮播项目

Question

目前我有一个带有 3 个项目的轮播，名为第 1 页、第 2 页和第 3 页，我要做的是在用户通过滑动动画从第 1 页切换到第 2 页时为第 2 页制作粗体文本。有人可以给我一个解决方案如何实现这个目标。谢谢！

App.js

Ext.Loader.setPath({
'Ext': 'sdk/src'
});


Ext.application({
controllers: ["Main"],

name: 'Sencha',

views: ['Main'],

icon: {
    57: 'resources/icons/Icon.png',
    72: 'resources/icons/Icon~ipad.png',
    114: 'resources/icons/Icon@2x.png',
    144: 'resources/icons/Icon~ipad@2x.png'
},

phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('Sencha.view.Main'));
},

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version. Reload now?",
        function() {
            window.location.reload();
        }
    );
}
});

用于视图的 Main.js

Ext.define("Sencha.view.Main", {
extend: 'Ext.Carousel',
xtype: 'mainview',

config: {
    id: 'carousel',

    fullscreen: true,

    indicator: false,

    directionLock: true,

    items: [
    {
        id: 'page1',
        xtype: 'panel',
        html: 'Page 1'
    },

    // Carousel 2
    {
            id: 'page2',
            xtype: 'panel',
            html: 'Page 2',
            initialize: function() {
                var carouselId = Ext.getCmp('carousel');
                var carouselIndex = carouselId.getActiveIndex();
                console.log(carouselIndex);
            }
    },


    // Carousel 3
    {
            id: 'page3',
            xtype: 'panel',
            html: 'Page 3'
    },
    ]

}
});

Answer 1

您可以在每个轮播项目上使用激活事件。因此，在您的控制器的控制配置中为您的第二页的 id 添加此代码，并在相应的函数中将您需要的任何代码放入其中，它会在激活特定轮播项目时运行。

这是一个例子：

new Ext.Carousel({
   fullscreen : true,
   defaults : {
      listeners : {
         activate : function() {
            console.log('activate');
         }
      }
   },
   items: [ 
      {
         html : 'One'
      },
      {
         html : 'Two'
      },
      {
         html : 'Three'
      }
    ]
});

Answer 2

用户getActiveItem()轮播方法