Sencha "Card Panel + Data view" makes scrolling impossible - scroll

Question

I have a scrolling problem that's driving me crazy. It only happens with card layout, and I tried every possible combination of "scroll" values, withou success.
Here is my situation:
I have an app with a tab panel attached to Viewport
Inside each tab, I need a card layout panel, so I can navigate on each tab independently (each tab is a different section)
The problem is: the scrolling works with simple elements like html div's, but if I try to grab a Ext.DataView OR a Ext.List component and scroll, it does not work properly
Funny thing: if I grab a DataView (or List), move the mouse a little bit and try to scroll, it works
The project is online for you to check: http://gaeti.com/scrollTest/
The code for the troubled card is here:
homeCardStart.js
Ext.regModel('testModel', {
fields: [{
name: 'name',
type: 'string'
}, {
name: 'birthday',
type: 'string'
}, {
name: 'description',
type: 'string'
}]
});
var testStore = new Ext.data.Store({
model: 'testModel',
method: 'GET',
proxy: {
url: 'res/recSample.json',
type: 'ajax',
reader: {
type: 'json',
root: 'items',
record: 'people',
}
}
});
var testData = new Ext.DataView({
tpl: '<tpl for="."><div class="person">{name}<br>{birthday}<br>{description}</div></tpl></div>',
store: testStore,
itemSelector: 'div.person',
scroll: false,
width: 350,
autoHeight: true,
margin: 20,
style: 'border:2px solid magenta'
});
testData.on('render', function () {
testData.store.load();
}, this);
App.views.HomeCardStart = Ext.extend(Ext.Panel, {
title: 'Home Start',
iconCls: 'home',
layout: 'vbox',
scroll: 'vertical',
style: 'background-color: silver',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: 'Home Start'
}],
items: [{
html: 'Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>',
style: 'border:2px solid green',
width: 350,
autoHeight: true
},
testData]
});
Ext.reg('homeCardStart', App.views.HomeCardStart);
Viewport.js:
App.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
id: 'mainTabPanel',
defaults: {
scroll: 'vertical'
},
items: [{
xtype: 'homeCard',
id: 'homeCard',
cls: 'home'
}, {
title: 'Mais',
iconCls: 'more'
}, {
title: 'Mais',
iconCls: 'more'
}, {
title: 'Mais',
iconCls: 'more'
}, {
title: 'Mais',
iconCls: 'more'
}]
});
HomeCard.js:
App.views.HomeCard = Ext.extend(Ext.Panel, {
title: 'Home',
iconCls: 'home',
layout: 'card',
width: '100%',
height: '100%',
style: 'background-color: green;',
items: [{
xtype: 'homeCardStart'
}, {
xtype: 'panel',
title: 'Another card',
style: 'background-color: pink'
}]
});
Ext.reg('homeCard', App.views.HomeCard);
What can be happening? Is it a bug? It only happens with card panel (the same bug occurs without a main tab panel outside)
Thanks!
Leo

Answer 1

The problem you are having is that you are nesting scrollable panels. In your tab panel you set the defaults to always add scroll to each card, and then within that card, the dataview is also scrollable.
To fix the issue, you should either turn scrolling off on your dataview, or remove scrolling on your card item. You cannot have both.