Sencha Touch List 在具有其他元素的面板中“粘住”

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

收入.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);
    }
});

当我初始化我的 Viewport 时，我将一个新的 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({.....} ) ] } );