Question

目前我有一个名为第1页，第2页和第3页的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

用户getActiveItem()轮播方法

Answer 2

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

以下是一个例子：

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

如何在sencha touch 2中获取当前活动的旋转木马项目

2 个答案: