View Full Version : Help with the Ext js height 100% idiom

19 Jan 2011, 2:18 PM
Hi all,

Just started using Ext.js, evaluating it for a project.

Everything seems pretty self explanatory to me except for the idiom that I've come to love in plain old JavaScript/CSS/HTML where I can force box elements to fill in a 100% height. The following is some code of what I'm talking about.

<!DOCTYPE html>
<title>vertical height example</title>
html, body { width:100%; height:100%; }
#outer { height:100%; width:100%; border:1px solid black; }
#inner { height:100%; width:50%; border:1px solid black; }
<div id="outer">
<div id="inner">inner</div>

If you drop this in a page, inner, by having a height of 100% will vertically fill out the page.

What I want is to be able to drop a Panel inside of another Panel in Ext.js and just say something to the equivalent of "height:100%" and have the child panel expand to 'fit' the outer panel.

Yes, I have read the docs about layout:'fit' but it only works for a single child panel. I want, say, a fitted tab panel to contain a panel with an hbox layout, and each panel child within the hbox to also fill be fit to the maximum height.

Has anyone else run into a nice, easy solution for vertically filling out the height of panels to 100% of the parent height without needing to use layout:'fit'?

21 Jan 2011, 3:37 PM
Always handy to use the layout browser: http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html

to see examples. If you click on the hbox example, I think you're looking for align : stretch?

21 Jan 2011, 3:38 PM
In many instances fit will do what you want. However it sounds like what you are looking for is the align configuration in the box layouts.

Have you tried align: 'stretch' within your hbox/vbox layout with flexes on each individual box?

If this isn't what you're looking for, could you post a snippet of code showing what you are using and then maybe an image to show what you want instead?

21 Jan 2011, 8:22 PM
Thank you guys for the replies. I just re-did my practice, skeletal layout I and a layoutConfig of {align:"stretch"} in my hbox panel layouts is what did the trick. For some reasons I was ignoring the semantics of the align and was not including it. Perhaps I'm just scarred by the years of "oh, just ignore that valign CSS setting" that maybe I don't even look at *align settings anymore? :)

I'll mess with the layout again, but I believe this solves my major remaining problem for the moment.

Hope you all have a great weekend.