0

適切な答えが見つからないので、助けを求めたかったのです。

左側と右側の2つのモジュールを備えたアプリを開発しており、トグルで有効/無効にできます。それぞれの側には、下にスライダーが付いた写真があります。スライダーには、画像を変更する4つのステップがあります。次に、写真にonChangeでフェードアニメーションを設定します。私の問題に十分に近い例を見つけることができません。

コードは次のとおりです。

{
            xtype: 'container',
            name: 'rightContainer',
            flex: 1,
            padding: '2',
            items: [
                {
                    xtype: 'container',
                    id: 'containerr',
                    flex: 1,
                    html: '<img src="boerse_icon1.png" />',
                    margin: 25,
                },
                {
                    xtype: 'container',
                    flex: 1,
                    docked: 'bottom',
                    items: [
                        {
                            xtype: 'sliderfield',
                            id: 'sliderr',
                            disabled: true,
                            value: 0,
                            minValue: 0,
                            maxValue: 3,
                            margin: 25,
                            flex: 1,
                            listeners: {
                                change: function( me, Slider, thumb, newValue, oldValue, eOpts) {
                                    if (newValue == 0) {
                                        Ext.getCmp('containerr').setHtml('<img src="boerse_icon1.png" />');
                                    }
                                    if (newValue == 1) {
                                        Ext.getCmp('containerr').setHtml('<img src="boerse_icon2.png" />');
                                    }
                                    if (newValue == 2) {
                                        Ext.getCmp('containerr').setHtml('<img src="boerse_icon3.png" />');
                                    }
                                    if (newValue == 3) {
                                        Ext.getCmp('containerr').setHtml('<img src="boerse_icon4.png" />');
                                    }
                                }
                            }
                        }
                    ]
                }
            ]
        }

これはちょうどいい容器です。Sencha TouchFramework2.0を実行しています

TIA

4

2 に答える 2

0

この作品かもしれません。

            {
                xtype: 'container',
                id: 'containerr',
                showAnimation :'fadeIn',
                flex: 1,
                html: '<img src="boerse_icon1.png" />',
                margin: 25,
            },
于 2012-09-27T10:32:41.587 に答える
0

あなたがする必要があるのは基本的に：

次のレイアウトでパネルを作成します。

layout: {
      type: 'card',
           animation: {
               type: 'fade',
               duration: 2000
           }
       }

change次に、イベントのリスナーでスライダーを作成します。

listeners: {
    change: function(me, Slider, thumb, newValue, oldValue, eOpts) {
        panel.setActiveItem(newValue);                        
    }
}

パネルにアイテム（画像）を入力すると、準備が整います。

それのために、私はあなたが実験できるように動作するセンチャフィドルをまとめました： センチャフィドルの例

うまくいけば、これはあなたを助けます！

于 2012-09-27T22:25:37.373 に答える