Sencha touch DataView 无法正常垂直滚动

Question

我在我的应用程序中使用了一个自定义的 DataView，这个 DataView 被设置为垂直滚动并稍后被添加到面板中。

但是现在DataView不能正常滚动，问题是： 当我下拉 DataView 时，它可以向下滚动，但是当我松开手指时，它会自动滚动回顶部。

谁能帮忙看看是什么原因？

谢谢~~

这是我的代码：

==============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);
    }
});

============面板包含数据视图============

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

您的错误似乎是由于 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'
    }
}

数据视图必须始终！将其布局设置为自动。如构造函数所述，顺便说一下，您应该会看到日志错误。

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>
}

尝试删除布局配置，它应该可以解决您的错误。

干杯！