Sencha Touch `directionLock` - 我哪里出错了？

Question

我已经定义了一个轮播。

Ext.define('rpc.view.bible.indexView', {    
    extend: 'Ext.Carousel',
    alias: 'widget.bible-indexView',
    direction: 'horizontal',
    directionLock: true,
    config: {
        items: [{
            xtype: 'toolbar',
            title: 'Bible Reading Plan',
            docked: 'top'
        }, {
            xtype: 'bible-_chapterADayView'
        }, {
            xtype: 'bible-_bibleInAYearView'
        }]
    },
    initialize: function() {
        console.log('rpc.view.bible.indexView ~ initialize');
        this.callParent();
    }
});

bible-_chapterADayView 和 bible-_bibleInAYearView 都是扩展 Ext.Panel 的部分视图。

它们按预期工作，但是我在 这个错误报告仍然存在，即使我已经实现了方向锁定。

我的 DirectionLock 实现哪里出了问题？

---

我也尝试过以下两种方法。

Ext.define('rpc.view.bible.indexView', {    
    extend: 'Ext.Carousel',
    alias: 'widget.bible-indexView',
    config: {
        scrollable: {
            direction: 'horizontal',
            directionLock: true
        },
        items: [{
            xtype: 'toolbar',
            title: 'Bible Reading Plan',
            docked: 'top'
        }, {
            xtype: 'bible-_chapterADayView'
        }, {
            xtype: 'bible-_bibleInAYearView'
        }]
    },
    initialize: function() {
        console.log('rpc.view.bible.indexView ~ initialize');
        this.callParent();
    }
});

和

Ext.define('rpc.view.bible.indexView', {    
    extend: 'Ext.Carousel',
    alias: 'widget.bible-indexView',
    scrollable: {
        direction: 'horizontal',
        directionLock: true
    },
    config: {
        items: [{
            xtype: 'toolbar',
            title: 'Bible Reading Plan',
            docked: 'top'
        }, {
            xtype: 'bible-_chapterADayView'
        }, {
            xtype: 'bible-_bibleInAYearView'
        }]
    },
    initialize: function() {
        console.log('rpc.view.bible.indexView ~ initialize');
        this.callParent();
    }
});

Answer 1

经过大量测试后，如果 scrollable 附加到partialView而不是carousel，它似乎可以正常工作。

Ext.define('rpc.view.bible.indexView', {
    extend: 'Ext.Carousel',
    alias: 'widget.bible-indexView',
    config: {
        items: [{
            xtype: 'toolbar',
            title: 'Bible Reading Plan',
            docked: 'top'
        }, {
            xtype: 'bible-_chapterADayView'
        }, {
            xtype: 'bible-_bibleInAYearView'
        }]
    },
    initialize: function () {
        console.log('rpc.view.bible.indexView ~ initialize');
        this.callParent();
    }
});


Ext.define('rpc.view.bible._bibleInAYearView', {
    extend: 'Ext.Panel',
    alias: 'widget.bible-_bibleInAYearView',
    config: {

        // ADD THE SCROLLABLE INFO HERE TO ACHIEVE THE DESIRED RESULT
        scrollable: {
            direction: 'vertical',
            directionLock: true
        },


        items: [{
            html: '<span style="float:right;"><i>Swipe for Chapter a Day</i><div class="x-icon-swipe x-icon-swipe-right"></div></span>'
        }, {
            xtype: 'container',
            cls: 'x-panel-rpc',
            items: [{
                html: '<h1>Bible in a Year</h1><i>Reading Plan</i>'
            }]
        }, {
            xtype: 'container',
            cls: 'x-panel-rpc',
            items: [{
                html: 'Rockin the lower info panel<br><br><br><br><br><br><br><br>more info<br><br><br><br>end'
            }]
        }]
    },
    initialize: function () {
        console.log('rpc.view.bible._bibleInAYearView ~ initialize');
        this.callParent();
    }
});