Sencha Touch `directionLock` - where am I going wrong? - carousel

Question

I've got a carousel defined.
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();
    }
});
both the bible-_chapterADayView and the bible-_bibleInAYearView are partial views that extend the Ext.Panel.
They're working as expected, however the scrolling issue that I had in this bug report still exists even though I have implemented directionLock.
Where am I going wrong with my directionLock implementation?
I've also tried the following two methods.
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();
    }
});
and
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

After much testing, it appears as though it works properly if the scrollable is attached to the partialView rather than the 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();
}
});