5

カルーセルを使用していますが、ボタンがクリックされるまでカルーセルをロックしたいと考えています。これを行う簡単な方法はありますか？ありがとう！

これまでの私のコード:

Ext.define('BabyBen.view.MainCarousel', {
    extend: 'Ext.carousel.Carousel',
    xtype: 'maincarousel',

    config: {
        fullscreen: true,

        activeItem: 1,
        indicator: false,

        scrollable: {
            direction: 'vertical',
            directionLock: true
        },

        items: [{
            xtype: 'whatscreen'
        }, {
            xtype: 'startscreen'
        }, {
            xtype: 'whenscreen'
        }]
    }
});
4

1 に答える 1

5

ロック可能なカルーセルのカスタム ビューを作成する必要があります。

Ext.define("myApp.view.LockableCarousel",{
    extend: 'Ext.Carousel',
    initialize: function () {
        this.onDragOrig = this.onDrag;
        this.onDrag = function (e) { if(!this.locked){this.onDragOrig(e);} }
            },
    locked: false,
    lock: function () { this.locked = true; },
    unlock: function () { this.locked = false; }
});

次に、このカスタム カルーセルを使用して任意の場所に拡張できます。また、ボタン ハンドラを使用して目的のロック可能なカルーセルにカスタムと関数extendを適用する必要があります。lockunlock

Ext.define("myApp.view.CustomCarousel",{
    xtype: 'CustomCarousel',
    extend: 'myApp.view.LockableCarousel',

    config: {
        id: 'LockableCarousel',
        title: 'Example4',
        iconCls: 'cloud',
        indicator: false,        

        items: [

            {
                html : 'Item 1',
                style: 'background-color: #5E99CC'
            },

            {
                items: [
                    {
                        xtype : 'button',
                        text: 'Lock',
                        handler:function() {
                            Ext.getCmp('LockableCarousel').lock();
                        }
                    },
                    {
                        xtype : 'button',
                        text: 'Unlock',
                        handler:function() {
                            Ext.getCmp('LockableCarousel').unlock();
                        }
                    }
                ]
            }



        ]
    }
});

Working Demo

于 2013-05-10T05:42:00.243 に答える