List scroll issue

[HustlaS]

Hi
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.

[jwjiwon]

I had the same problem, and I found out that dataview or list is different from other panels.
they are 'view' so that they need to be just view in itself.
you can't add it to panel or container right away.


Making dataview as a main
and adding no panels to dataview will work
for example, like this :

Ext.define('TimeShift.view.Activity', {
extend: 'Ext.dataview.List', 
id: 'Activity', 
alias: 'widget.Activity',
layout: 'card',
config: {         
 layout: 'card', //    fullscreen: true,                 
store: 'ActivityStore',                 
scrollable: 'vertical',                 
itemTpl: '<div class="contact">{Purpose}</div>',                 
     
},     
initialize: function () {         
console.log('initialize ActivityList');         
this.callParent();     
} 
});

Ext.define('TimeShift.view.ListContainer', {
	extend: 'Ext.Container',     
	id: 'ListContainer',     
	alias: 'widget.ListContainer',      
	cardAnimation: 'slider',     
	scrollable: true,     
	autoDestroy: true,     
	config: {         
	items: [              
	{ xtype: 'Activity' },
	{ xtype: 'toolbar',                         
     docked: 'top',                         
     title: 'Aktivitäten'   }
	]      
	},     
	initialize: function () {         
	console.log('initialize ListContainer');         
	this.callParent();     
	} 
});

I hope this will help you

[rdougan]

The layout configuration applies to a containers items, so if you specify a container with a layout of 'card', it means each of its items will stretch to fit the size of its container.

The problem here is that you have given a list a layout, which is incorrect. A list will automatically layout its items without needing a layout. If you remove layout: 'card' it will probably fix your issues.

I'll add code into data view and list to never use the layout configuration.

Thanks!

[HustlaS]

both reply works but the simplest is..

delete

layout: 'card';

thanks for help!