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