与其他元素一起位于面板中时，Sencha触摸列表会“粘住”

Question

我有一个面板，我想在其中添加其他元素和列表。 当我自己拥有父面板中的列表时，列表可以正常运行。 但是，当我将另一个项目添加到父面板时，该列表现在将不会向下滚动（不再受屏幕尺寸的限制）。

这就是我想要的布局：

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

EventList.js

shopifymobile.views.EventList = Ext.extend(Ext.Panel, {
    layout: 'fit',
    items: [
        {
            id: 'eventList',
            xtype: 'list',
            store: shopifymobile.stores.onlineEventStore,
            itemTpl: [
                '<div class="eventitem">',
                    '<div id="eventdata">',
                        '<ul>',
                            '<li>New {verb}</li>',
                            '<li>{message}</li>',
                        '<ul>',
                    '</div>',
                    '<div id="eventtime">',
                        '<p>{created_at}</p>',
                    '</div>',
                '</div>'
            ]
        },
    ],
    initComponent: function(){
        shopifymobile.views.OrderList.superclass.initComponent.apply(this, arguments);
    }
});

初始化视口时，将新的RevenuePanel和Eventlist添加到dashboardIndex对象：

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

我可以使列表有些正常的唯一方法是将其设置为全屏显示，但是由于我在屏幕底部有一个工具栏，因此最后一项被它覆盖了。

Answer 1

我这样做的方法是将列表嵌入面板中，并且该面板包含的布局应使用layout：fit。 我还必须在包含的面板中指定width：100％，但这可能会因您的具体情况而有所不同。 这就是我所做的-请注意，我也在使用DataVIew而不是Panel作为列表库，但是无论哪种方法都可以。

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