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