I've got a Container with a header, content (Carousel) and a footer. The Container itself is therefor scrollable (vertical) to be able to scroll down to the footer. The Carousel can be swiped horizontally to change active item. I want to lock it to do only two thing:
If starting to move vertically, only scroll Container
If starting to move horizontally, only scroll Carousel
If you now grab the Carousel you are able to scroll both ways at the same time. Example code:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
scrollable: true,
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'abc'
}
]
},
{
xtype: 'carousel',
height: 200,
scrollable: false,
items: [
{
xtype: 'label',
html: 'x'
},
{
xtype: 'label',
html: 'y<br/>y<br/>y<br/>y<br/>y<br/>y<br/>y<br/>y'
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'def'
}
]
}
]
}
});
Using Sencha Touch 2.
