Sencha touch DataView cannot scroll vertically properly

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!