PDA

View Full Version : footer problem



vijaypatil12
10 Nov 2010, 3:50 AM
I have - var viewport = new Ext.Viewport({

layout: 'border',

and I have set footer as -

<div style="height:20px; position:absolute; bottom:0px; width:100%; text-align:center; font-family:tahoma; font-size:13px; background-color:#1D479B; color:#fff; text-align: right;">
&copy 2008 EXFO Inc. All rights reserved &nbsp;
</div>

But the problem is that when i collapsible south region, the collapsible strip come over the footer, and that why my footer is not visible

how can i solve this problem - please help

Condor
10 Nov 2010, 4:05 AM
The viewport takes up the ENTIRE window, so you can't have other divs in the body.

You need to embed that footer as a BoxComponent inside the Viewport, e.g.


var viewport = new Ext.Viewport({
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
xtype: 'container',
layout: 'border',
items: ...
},{
autoHeight: true,
xtype: 'box',
el: 'id-of-footer'
}]
});
(and remove "position:absolute;bottom:0px;width:100%;" from the style, because the viewport will now take care of sizing)

vijaypatil12
10 Nov 2010, 9:44 PM
hi condor,

as you said , i have done the code as -

//// JS file Start

Ext.onReady(function(){

var viewport = new Ext.Viewport({
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: 'border',
items:[
{
region: 'north',
html: 'north',
height: 74
},
{
region: 'east',
html: 'east'

},
{
region: 'south',
html: 'south'

},
{
region: 'center',
html: 'center'

},

]
},{
xtype: 'box',
el: 'footerid'
}]
});

});



////// html file code

<div id="footerid">
&copy 2008 EXFO Inc. All rights reserved &nbsp;
</div>



still it is not working properly

darthwes
10 Nov 2010, 9:53 PM
Ext.onReady(function () {
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: 'north',
height: 74
}, {
region: 'center',
html: 'centaur'
}, {
region: 'south',
height: 175,
contentEl: 'footerid'
}]
});
});

?

vijaypatil12
10 Nov 2010, 10:00 PM
hi darthwes,

the problem with this is, when i collapsible south region my footer is also hide, which i don't want to hide

I want footer always at the bottom and last.

vijaypatil12
10 Nov 2010, 10:40 PM
hi condor , need your help for sample code to address my footer problem

Thanks
vijay patil

Condor
10 Nov 2010, 10:49 PM
I forgot to specify the height of the vbox items. I've updated my post above.

vijaypatil12
10 Nov 2010, 11:16 PM
yes it is working now,

Thanks Condor for your help

vijaypatil12
17 Nov 2010, 1:37 AM
hi Condor,
I have posted new thred on yesterday and today morning, but I have not get any reply on this
so can you please tell me what is the problem

Thanks - vijay patil