列表滚动问题答案

【问题标题】：List scroll issue列表滚动问题
【发布时间】：2012-02-02 10:07:30
【问题描述】：

我的列表有问题。我无法滚动它们。列表向下移动，但在 Tapend 后跳到顶部。我使用 Sencha touch PR4，并在 Ipad 和 Google Chrome 上进行了测试

我使用这个视图

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&#228;ten'
                    }] 
    }]
    },
    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' }
        ]

    },
    initialize: function () {
        console.log('initialize ListContainer');
        this.callParent();
    }
});

我希望有人可以帮助我。

【问题讨论】：

标签： sencha-touch extjs sencha-touch-2

【解决方案1】：

使用布局“适合”到您的父容器，或者您也可以指定父容器的高度。如果视口在需要显示下一个项目的跨度之后现在没有，它将不会滚动。您需要为滚动指定边界。

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

（未测试。希望这会有所帮助。）

【讨论】：