如何在 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