PDA

View Full Version : Adding a footer to the border layout



santosh_bdp
23 Mar 2010, 8:18 AM
Hi,

I am very new to extjs, i want to add a footer to the border layout along with the east,west, north,south regions, I tried different ways but could'nt figure out to do it, may be becos of my lack of understanding. Please Help...

Thanks in advance

Stju
23 Mar 2010, 8:50 AM
Border layout does not have footer or header ;).
It has regions - south,west,noth east, and mandatory center.
Take a look at samples:
http://www.extjs.com/deploy/dev/examples/layout/complex.html

Stju

santosh_bdp
23 Mar 2010, 9:08 AM
thanks for your response, i know that border layout does'nt have a footer or header but my requirement needs a header and a footer with the border layout, however i can make the north region as the header but i cannot make south as the footer as i need the south region for something else which means i need the all the regions with an extra footer, i was wondering if there is a way to do it????

i tried to give a margin bottom to the south region and create a footer by adding some static html code, it looks fine until its not collapsed but when the south region is collapsed its giving me a problem as its overlaying on the footer.... trying to figure a way out.....which will make a space at the bottom...please help...

Stju
23 Mar 2010, 9:14 AM
I am trying to picture your requirements.. can you just dray a picture?
1.at the time I can suggest to place a Panel with fbar (footer bar) in ceter region.
2.Anyway you can nest layouts, and place in south and north regions other containers with border layout..

santosh_bdp
23 Mar 2010, 9:43 AM
Here is what i need, I tried creating a footer by adding a margin bottom to the south region and then adding some html code which gives me a footer but when i collapse the south panel, it completely comes over the footer covering the footer...may be adding some kind of panel in the layout would help but i cannot figure that out..http://img693.imageshack.us/img693/7176/cmpxlayout.gif

Stju
23 Mar 2010, 11:50 AM
Looks like You have a viewport, not the container... if so- there is no straight solution.
anything what will be in south region will be hidden on collapse. If collapsing is not necessary, then simply use container there with Vbox layout and put two items there.. there can be other possibilities with nesting, but be sure do not overnest..

Third, can be a kind of dirty workaround, maybe someone have a better one ;)


var a = new Ext.Viewport({
layout:'border',
items:[{
xtype:'panel',
title:'center',
region:'center'
},
{
xtype:'panel',
title:'south',
region:'south',
margins:'5 5 128 5',
cmargins:'5 5 128 5',
collapsible:true,
height:200
},
{
xtype:'panel',
title:'north',
region:'north',
margins:'5 5 5 5',
collapsible:true,
height:200
}
]
});


And in base php or html page put this code:


<body>
<div id="myBottomJunk" style="
font-size: 10px;
color: red;
text-align: left;
margin:5px;
position: absolute;
bottom: 0px;
left: 0px;
height: 120px">aaaaaaaaaaaaaaaaaa<br> bla bla<br> lalala </div>
</body>


This will give You the good starting point, modify it as you need :)

Stju

santosh_bdp
23 Mar 2010, 1:51 PM
Hey! prob solved,, thanks a ton, the only thing that was missing in my code was the cmargins...thanks again....

Stju
23 Mar 2010, 4:02 PM
You welcome :)