YUI Library Home

YUI Library Examples: Layout Manager: Nesting a layout

Layout Manager: Nesting a layout

This example shows how to nest a Layout inside another layout.

Set up the Layout Manager for a full page layout

First we will make a full page layout by omitting the first parameter to the Layout Manager's constructor.

Setting up the first Layout's Units

For this example we will create all 5 units in the full page layout.

Setting up the second layout

Now that we have the first layout rendered and working, we will go back and listen for the render event on the first layout to create the second one.

Inside the render event, we will call the getUnitByPosition('center') on the first layout to get the center unit. Then we will call its method .get('wrap'); to get us the root element of that unit.

Now that we have it, we will use it as the root element of the second layout and set it up as an element based layout.

Note: that we are passing the parent config option. This config option will bind the 2 layouts together so that a resize on one will fire a resize on the other.

Full Example Source

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings