ExtJS sticky south panel

Question

I am using ExtJS viewport border layout. in order to create a north, center and south region. The first issue faced is that the viewport could not display a scrollbar for its contents, so i used a panel inside the viewport and added panels inside them with the location i wanted:

Ext.create('Ext.container.Viewport', {
    id: 'viewportContainer',
    layout: {
        type: 'border',
        align: 'center'
    },
    forceFit: 'true',
    items : [{
        layout:'anchor',
        scroll:true,
        autoScroll:true,
        region : 'center',
        xtype : 'panel',
        items : [ {
            region: 'north',
            xtype: 'panel',
            bodyStyle: {
                'background': 'none'
            },
            items: [upperPanel, messagePanel()]
        },{
            layout:'anchor',
            form: searchForm.id,
            id: 'innerBody',
            region : 'center',
            xtype : 'panel',
            items : [searchForm, gridPanel ]
        } ,{
            region: 'south',
            xtype: 'panel',
            items: [bottomPanel]
        } ]
    } ]
}

What i want to do is

stick the bottomPanel to the bottom of the page, if the other contents are shorter than the viewable area (clientHeight) and
if they are taller, let the footer be located right below the innerBody section.

The current implementation places the footer right below the innerBody panel but doesn't stick to the bottom when all the contents of the page are shorter than the viewable area(clientHeight)

Any help would be highly appreciated! Thank you

Your layout is anchor. regions make sense only if border layout is used. — Molecular Man
if i use border layout the vertical scrollbar (disappears even though the innerBody height is taller than the page) and the bottomPanel is always at the bottom. — Nickey

Sushant Sushant · Accepted Answer · 2014-04-04T13:57:24

I'm doing the following code please check it.

Mycode:

Ext.create('Ext.container.Viewport', {
    id: 'viewportContainer',
    layout: {
        type: 'border',
        align: 'center'
    },
    forceFit: 'true',
    items : [{
        layout:'anchor',
        scroll:true,
        autoScroll:true,
        region : 'center',
        xtype : 'panel',
        items : [ {
            region: 'north',
            xtype: 'panel',
            bodyStyle: {
                'background': 'none'
            },
            items: [upperPanel, messagePanel()]
        },{
            layout:'anchor',
            form: searchForm.id,
            id: 'innerBody',
            region : 'center',
            xtype : 'panel',
        minHeight:'540',
            items : [searchForm, gridPanel ]
        } ,{
            region: 'south',
            xtype: 'panel',
            items: [bottomPanel]
        } ]
    } ]
}

I'm only applying the 'minHeight' property to the'innerBody' panel. It works. Please try it.

ExtJS sticky south panel

1 Answers