如何在Sencha Touch中锁定旋转木马

Question

我正在使用旋转木马,并希望锁定旋转木马,直到单击按钮.是否有捷径可寻？谢谢!

我的代码到目前为止:

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'
        }]
    }
});

Answer 1

您需要为可锁定的轮播写一个自定义视图:

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,以及你需要通过按钮处理程序为你想要的可锁定轮播应用自定义lock和unlock功能:

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