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

Posted 2023-02-25

【中文标题】如何在sencha touch 2中获取当前活动的轮播项目

【英文标题】：How to get current active item of carousel in sencha touch 2

【发布时间】：2012-08-15 10:41:14

【问题描述】：

目前我有一个带有 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/[e-mail]',
    144: 'resources/icons/Icon~[e-mail]'
,

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'
    ,
    ]


);

【参考方案1】：

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

这是一个例子：

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

【参考方案2】：

用户getActiveItem()轮播方法

【讨论】：

它给了我活动项目，但我的问题是当前活动项目，因为无论我做什么，这个功能总是给我 0