2

現在、ページ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'
    },
    ]

}
});
4

2 に答える 2

0

各カルーセルアイテムでアクティブ化イベントを使用できます。したがって、コントローラーの制御構成で2ページ目のIDにこれを追加し、対応する関数に必要なコードを入力すると、特定のカルーセル項目がアクティブ化されたときに実行されます。

次に例を示します。

new Ext.Carousel({
   fullscreen : true,
   defaults : {
      listeners : {
         activate : function() {
            console.log('activate');
         }
      }
   },
   items: [ 
      {
         html : 'One'
      },
      {
         html : 'Two'
      },
      {
         html : 'Three'
      }
    ]
});
于 2012-08-16T00:33:42.860 に答える
0

getActiveItem()カルーセルのユーザーメソッド

于 2012-08-15T11:17:04.563 に答える