0

タブビューに 6 つのタブを持つアプリケーションをセットアップしました。これらのタブのうち 2 つは、画像を含むカルーセルです。

2つの問題があります:

1: カルーセル内でカードを切り替えると、アニメーションは右から左にしか機能しません (次のスライド アニメーション)。ただし、左から右にスライドすると (前のスライド アニメーション)、前の画像がアニメーションなしで表示されます。

2：タブを他のタブに変更してからカルーセルに戻ると、開始位置にリセットする必要があります-最初の画像を再度表示します。

これを修正する方法はありますか？

カルーセルタブに使用するコードは次のとおりです。

var Tab1 = {
    id:'Tab1',
    xtype: 'carousel',
    layout: 'card',
    title: 'Product Info',
    iconMask: true,
    iconCls: 'info',
    bufferSize: 5,
    items: [
        { cls: 'card product-info page1' },
        { cls: 'card product-info page2' },
        { cls: 'card product-info page3' },
        { cls: 'card product-info page4' },
        { cls: 'card product-info page5' }
    ],
}
4

2 に答える 2

0

次のコードでリセットしたい各タブにリスナーを配置することでこれを解決しました：

activate : function() {
    Ext.getCmp('Tab2').setActiveItem(0);
}
于 2012-08-14T08:38:24.793 に答える
0

Tab1 はカルーセルの ID であるため、必要なことは、activeItemChange イベントのタブ パネルにリスナーを追加し、これを行う関数を呼び出すことだけです。

resetCarousel: function() {
    Ext.getCmp('Tab1').setActiveItem(0);
}

タブ パネルに複数のカルーセルまたはその他のコンテナーがあると仮定すると、リセット関数を呼び出す特定のカルーセルがどのタブにあるかを特定する必要があります。さらに、リスナー関数でそのコードを使用することもできます。したがって、タブパネルにリスナーを追加すると、次のように特定のコンテナーをリセットできます。

onTabChange: function(object, value, oldValue, eOpts) {
    console.log(value); //do this and view the console to see what the values are so you can specify them in your conditions
    if (value == "x") {
        Ext.getCmp('Tab1').setActiveItem(0);
    } else if (value == "y") {
        //do something
    } else {
        //do something
    }
}
于 2012-08-13T17:20:51.397 に答える