Scrollable within scrollable

[mvarshavsky]

Is there a way to cancel event bubbling on scrollable events? I have a scrollable within another one and would like the outer to not move around when inner one's getting scrolled. I can on 'scrollstart' find the outer view and disable its scrollable, but hoping there's something less hacky...

Ext.application({
    name: 'Sencha',
    launch: function () {
        return Ext.create("Ext.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',
            layout: {
                type: 'fit'
            },
            scrollable: {
                direction: 'vertical'
            },
            items: [{
                layout: {
                    type: 'vbox',
                    align: 'sretch'
                },
                items: [{
                    html: 'header',
                    style: 'background:limegreen',
                    height: 200
                }, {
                    style: 'background:pink',
                    flex: 1,
                    layout: 'fit',
                    margin: 100,
                    items: [{
                        html: 'also a scrollable section',
                        scrollable: {
                            direction: 'both'
                            directionLock: true
                        }
                    }]
                }]
            }]
        });
    }
});

[mitchellsimoens]

None of the scroll events are preventable.

[mvarshavsky]

Mitchell, thanks for responding! Perhaps let me rephrase the question... In the situation of one scrollable within another, what's the best way to prevent scrolling the outer container and localize the effect to just the inner one? Like stopping propagation of drag events within the scrollable?