Scroll: 'vertical' on a Carousel hides content

[rockinthesixstring]

I've got a carousel that works fine if

scroll: 'vertical'

is not used, but as soon as I use it, all my content dissappears.

controller

Ext.define('rpc.controller.bible', {
    extend: 'Ext.app.Controller',
    views: ['bible.indexView'],
    stores: [],
    refs: [],

    init: function () {
        console.log('rpc.controller.bible ~ init');
    }
});

view

Ext.define('rpc.view.bible.indexView', {
    extend: 'Ext.Carousel',
    alias: 'widget.bible-indexView',
    requires: [
        'Ext.carousel.Carousel'
    ],
    config: {
        items: [{
            xtype: 'panel',
            items: [{
                xtype: 'bible-_chapterADayView'
            }]
        }]

    },
    initialize: function() {
        console.log('rpc.view.bible.indexView ~ initialize');
        this.callParent();
    }
});

partial views

Ext.define('rpc.view.bible._chapterADayView', {
    extend: 'Ext.Container',
    alias: 'widget.bible-_chapterADayView',
    layout: 'vbox',
    config: {
        items: [{
            xtype: 'toolbar',
            title: 'Chapter a Day',
            docked: 'top'
        }, {
            xtype: 'container',
            cls: 'rpc-outerPanelWrapper',


            // REMOVE THIS AND IT WILL WORK
            scroll: 'vertical',


            items: [{
                html: '<span style="float:right;"><i>Swipe for Bible in a Year</i><div class="x-icon-swipe x-icon-swipe-left"></div></span>'
            }, {
                xtype: 'container',
                cls: 'x-panel-rpc',
                items: [{
                    html: '<h1>Bible Reading</h1><i>Read a chapter a day</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._chapterADayView ~ initialize');
        this.callParent();
    }
});

[rockinthesixstring]

I trimmed the fat on my app and with the changes below, I can now get vertical scrolling as well as horizontal swiping.. But this has posed a new problem.

When scrolling vertically, it should "LOCK" the horizontal axis and prevent a swipe.
Likewise, when swiping horizontally, it should "LOCK" the vertical axis and prevent a scroll.

As it stands right now, swiping also scrolls and scrolling also swipes... IE: the panel free floats all over the place.

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();
    }
});

and

Ext.define('rpc.view.bible._chapterADayView', {
    extend: 'Ext.Panel',
    alias: 'widget.bible-_chapterADayView',
    config: {
        scrollable: true,
        items: [{
            xtype: 'container',
            cls: 'rpc-outerPanelWrapper',
            items: [{
                html: '<span style="float:right;"><i>Swipe for Bible in a Year</i><div class="x-icon-swipe x-icon-swipe-left"></div></span>'
            }, {
                xtype: 'container',
                cls: 'x-panel-rpc',
                items: [{
                    html: '<h1>Chapter a Day</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._chapterADayView ~ initialize');
        this.callParent();
    }
});

I'm pretty certain that the FIRST post in this thread is a bug, and I'm thinking this is a similar bug as well.

Please correct me if I'm wrong.

[rockinthesixstring]

Please close / delete this thread. I didn't communicate the issue clearly.. I will post a new thread.