AnchorLayout?

[Timothy]

Would anyone be able to provide an example of a 3 row stack of divisions that take up 100% of the page? For instance:

<div style="height: 100px;">
Header


<div style="height: ...whatever is left;">
Content


</div style="height: 100px;">
Footer

Cheers,
Timothy

[geoffrey.mcgill]

Hi Timothy,

I added a sample page demonstrating a 3 Panel AnchorLayout inside a ViewPort. The ViewPort container will provide the 100% height/width to fill the Page.

http://sandbox.ext.net/Layout/Anchor...-3-panels.aspx

There is one minor issue, the code-base used in the sample above is v0.5.2, which includes a minor change I made to the AnchorLayout. The "HorizontalAnchor" and "VerticalAnchor" properties have been renamed to just "Horizontal" and "Vertical". You'll have to swap out those properties if using with 0.5.1 (or earlier).

As well, you might have to set both the HorizontalAnchor property and the VerticalAnchor property on the Center Anchor. The following should work.

Example (v0.5.1 or earlier only)

<ext:Anchor HorizontalAnchor="100%" VerticalAnchor="-200">

With v0.5.2 (or later), you should only have to set the Vertical property.

Example

<ext:Anchor Vertical="-200">

Also, the AnchorLayout ExtJS documentation may be worth a quick scan to get a sense of what's possible.

Hope this helps.

[Timothy]

Great, I was able to figure this one out shortly after I posted it, and I got it from the ExtJS documentation.

Cheers for the help!

Timothy

[geoffrey.mcgill]

Thanks for the update.

If you find the answer to your post before it's been responded too, please post an update. And best of all, include the code used to solve the problem. The whole community would be thankful. ;)

[Timothy]

Yup, got side tracked at work but will do ;)