Question

I have a Panel where I would like to have some other elements in it and a list. When I have the list in the parent panel on it’s own, the list functions properly. However, when I add another item to the parent panel, the list now won’t scroll downward (it’s no longer constrained to the size of the screen).

This is how I’d like my layout to be:

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

Though the list appears to be getting rendered offscreen for all of the data in it’s store.

This is what I have for my view:

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

When I initialize my Viewport I add a new RevenuePanel and Eventlist to a dashboardIndex object:

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

The only way I can get the list to somewhat work is if I set it to fullscreen, but since i have a toolbar on the bottom of my screen the last item is being overlapped by it.

Answer 1

The way I’ve done this is to embed the list inside of a panel, and that panel containing should use layout:fit. I’ve also had to specify width :100% in the containing panel but that may vary based on your specific case. Here’s what I did – note that I’m also using DataVIew and not Panel as the list base, but it should work either way.

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