Javascript Sencha触摸列表'；棍棒'；当与其他图元在面板中时

我有一个面板，我想在其中有一些其他元素和一个列表。当我在父面板中拥有自己的列表时，列表会正常工作。但是，当我向父面板添加另一个项目时，列表现在不会向下滚动（不再受屏幕大小的限制）

我希望我的布局是这样的：

      Viewport
|--------------------|
|    Revenue Panel   |
|--------------------|
|     EventList      |
|                    |
|--------------------|

尽管该列表似乎在其存储区中的所有数据的屏幕外呈现

这就是我的观点：

DashboardIndex.js

shopifymobile.views.DashboardIndex = Ext.extend(Ext.Panel, {
    dockedItems: [
        {
            xtype: 'toolbar',
            title: 'SHOP NAME',
            dock: 'top',
            defaults: {
                iconMask: true,
                ui: 'plain'
            },
            items: [
                {xtype: 'spacer'},
                {
                    iconCls: 'refresh',
                    listeners: {
                        'tap' : function(){
                            shopifymobile.stores.onlineEventStore.load();
                        }
                    }
                }
            ]
        }
    ],
    layout: 'fit',
    fullscreen: true,
});

Revenue.js

shopifymobile.views.RevenuePanel = Ext.extend(Ext.Panel, {
    styleHtmlContent: true,
    flex: 1,
    items: [
        {
            tpl: [
            '<div class="revenuepanel">',
                '<div id="revenuedata">',
                    '<h3 class="label">TODAY\'S REVENUE</h3>',
                    '<p>{revenue}</p>',
                '</div>',
                '<div id="orderdata">',
                    '<div id="orders">',
                        '<p><span class="label">ORDERS</span>{count}</p>',
                    '</div>',
                    '<div id="items">',
                        '<p><span class="label">ITEMS</span>{items}</p>',
                    '</div>',
                '</div>',
            '</div>'
            ],
        }
    ],
    updateWithRecord: function(record){
        Ext.each(this.items.items, function(item){
            item.update(record.data);
        });
    },
    //*************HACK FIXME***********************
    fetchStoreData: function(){
        var store = shopifymobile.stores.onlineProductStore;
        this.updateWithRecord(store.getAt(0));
        store.removeListener('load', this.fetchStoreData);
    },
    initComponent: function(){
        shopifymobile.stores.onlineProductStore.addListener('load', this.fetchStoreData, this);
        shopifymobile.stores.onlineProductStore.load();
        shopifymobile.views.RevenuePanel.superclass.initComponent.apply(this, arguments);
    }
});

---

唯一能让列表起作用的方法是将其设置为全屏，但由于我在屏幕底部有一个工具栏，最后一项被它重叠了。

我这样做的方法是将列表嵌入面板中，并且包含的面板应该使用layout:fit。我还必须在包含面板中指定宽度：100%，但根据具体情况可能会有所不同。下面是我所做的-请注意，我也使用DataVIew而不是Panel作为列表库，但它应该以任何一种方式工作

        var panel = new Ext.Panel({
        flex: 1,
        frame:true,
        autoHeight: true,
        collapsible: true,
        width: '100%',
        layout: 'fit',
        items: [
            new Ext.DataView({.....} ) ] } ); 

    shopifymobile.views.dashboardIndex.add(new shopifymobile.views.RevenuePanel());
    shopifymobile.views.dashboardIndex.add(new shopifymobile.views.EventList());

        var panel = new Ext.Panel({
        flex: 1,
        frame:true,
        autoHeight: true,
        collapsible: true,
        width: '100%',
        layout: 'fit',
        items: [
            new Ext.DataView({.....} ) ] } );