Sencha touch DataView cannot scroll vertically properly - extjs

Question

i am using a customized DataView in my app, this DataView was set to scroll vertically and been added into a panel later.
But now the DataView cannot scroll properly, the problem is:
when i drop down the DataView, it can scroll down, but when i release my finger, it scroll back to top automatically.
could anybody help to check what's the reason?
thanks~~
here is my codes:
==============The DataView==============
Ext.define("cherry.view.UserActivityList", {
extend: 'Ext.dataview.DataView',
xtype: 'user-activity-list',
requires: [
'cherry.store.UserActivityStore',
'Ext.dataview.DataView',
'Ext.XTemplate'
],
config: {
styleHtmlContent: true,
height: '100%',
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="activity-ctn">',
' <div class="activity-content">{content}</div>',
'</tpl>'
)
},
initialize: function () {
this.callParent(arguments);
var me = this;
var store = Ext.getStore('user-activity-store');
store.load();
me.setStore(store);
}
});
============Panel contains the DataView============
Ext.define('cherry.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
'cherry.view.ComposeToolbar',
'cherry.view.Menubar',
'cherry.view.UserActivityList'
],
config: {
layout: 'card',
id: 'main-container-view',
scrollable: null,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'cherry',
id: 'main-toolbar',
cls: 'main-toolbar',
items: [
{
xtype: 'button',
iconCls: 'menu2',
text: 'Menu',
iconMask: true,
handler: function () {
Ext.Viewport.toggleMenu('left');
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconCls: 'loop2',
text: 'Refresh',
iconMask: false,
handler: function () {
Ext.getStore('user-activity-store').load();
Ext.ComponentQuery.query('#user-activities-list-view')[0].refresh();
}
}
]
},
{
xtype: 'compose-toolbar'
},
{
xtype: 'user-activity-list',
id: 'user-activities-list-view',
itemId: 'user-activities-list-view',
layout: 'fit',
height:'100%',
cls:'dataview-ctn',
scrollable:{
direction:'vertical'
}
}
]
},
initialize: function () {
Ext.Viewport.setMenu(cherry.view.Menubar.createMenu('left'), {
side: 'left',
reveal: true
});
}
});

Answer 1

It seems that your error is due to the layout config in user-activity-list
{
xtype: 'user-activity-list',
id: 'user-activities-list-view',
itemId: 'user-activities-list-view',
layout: 'fit',
height:'100%',
cls:'dataview-ctn',
scrollable:{
direction:'vertical'
}
}
A dataview must ALWAYS! have its layout to Auto. As stated by the constructor, which by the way you should be seeing a log error.
constructor: function(config) {
var me = this,
layout;
me.hasLoadedStore = false;
me.mixins.selectable.constructor.apply(me, arguments);
me.indexOffset = 0;
me.callParent(arguments);
//<debug>
layout = this.getLayout();
if (layout && !layout.isAuto) {
Ext.Logger.error('The base layout for a DataView must always be an Auto Layout');
}
//</debug>
}
Try removing the layout config it should fix your error.
Cheers!