List scroll issue - sencha-touch

Question

I've a problem with my List. I can't scroll them. The list move down but jump to the top after tapend.
I use Sencha touch PR4 and i have test this on Ipad and Google Chrome
I use this view
Ext.define('TimeShift.view.Activity', {
extend: 'Ext.Panel',
id: 'Activity',
alias: 'widget.Activity',
layout: 'card',
config: {
items: [
{ xtype: 'list',
layout: 'card', // fullscreen: true,
store: 'ActivityStore',
scrollable: 'vertical',
itemTpl: '<div class="contact">{Purpose}</div>',
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Aktivitäten'
}]
}]
},
initialize: function () {
console.log('initialize ActivityList');
this.callParent();
}
});
and this view is in this container
Ext.define('TimeShift.view.ListContainer', {
extend: 'Ext.Container',
id: 'ListContainer',
alias: 'widget.ListContainer',
cardAnimation: 'slider',
scrollable: true,
autoDestroy: true,
config: {
items: [
{ xtype: 'Activity' }
]
},
initialize: function () {
console.log('initialize ListContainer');
this.callParent();
}
});
I hope someone can help me.

Answer 1

Use layout 'fit' to your parent container OR you can also specify height of the parent container. If viewport does not now after what span it needs to show next items, it will not scroll. You NEED to specify bounds for the scroll.
Ext.define('TimeShift.view.ListContainer', {
extend: 'Ext.Container',
id: 'ListContainer',
alias: 'widget.ListContainer',
**layout: 'fit',**
cardAnimation: 'slider',
scrollable: true,
autoDestroy: true,
config: {
items: [
{ xtype: 'Activity' }
]
},
initialize: function () {
console.log('initialize ListContainer');
this.callParent();
}
});
(Not tested. Hope this helps.)