PDA

View Full Version : Fixed but pushable footer



Netarious
11 Nov 2009, 4:46 AM
I want a footer to remain at the bottom of the window unless it is pushed down by the rest of the content.

In other words I don't want this: http://www.extjs.com/store/, I want the footer to be fixed if the content is small but movable if the content is large.

Any ideas?

Netarious
11 Nov 2009, 7:06 AM
Instead of using the Viewport I used a standard Panel and set

height: Ext.lib.Dom.getViewHeight(true),

I then wrote an afterlayout listener on the center region to check whether the contents exceeded the view.

I'm probably doing this in a terribly inefficient way but here's the code for you all to laugh at:



Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Ext.ns('Master','Browser','Content');

var _timer;

Content.CheckViewHeight = function(ch){
//use setTimeout to cope with different rendering times
clearTimeout(_timer);
if(Master.Viewport){
var contentHeight = ch + 179;
var viewHeight = Ext.lib.Dom.getViewHeight(true);
if(contentHeight > viewHeight) Master.Viewport.setHeight(contentHeight);
} else {
_timer = setTimeout("Content.CheckViewHeight(" + ch + ");",10);
}
}

Content.Init = function(){

}

Content.Panel = {
id: 'contentContainer',
region: 'center',
layout: {
type: 'vbox',
align: 'center'
},
items: [
{
width: 940,
listeners: {
afterlayout: function(p){
Content.CheckViewHeight(p.getHeight());
}
},
items: [
//repeat these to test resize
{
html: 'Test<br/>Test<br/>'
},
{
html: 'Test<br/>Test<br/>'
}
]
}
]
};

Ext.onReady(function() {

//Create our layout
Master.Viewport = new Ext.Panel({
id: 'viewportPanel',
renderTo: 'mainViewport',
layout:'border',
border: false,
autoScroll: false,
height: Ext.lib.Dom.getViewHeight(true),
monitorResize: true,
defaults: {
collapsible: false,
split: false,
border: false
},
items: [
{
id: 'northRegion',
region: 'north',
height: 150,
html: 'Header'
},
Content.Panel,
{
id: 'southRegion',
region: 'south',
height: 29,
html: 'Footer'
}
]
});

Content.Init();

});