YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Layout Manager: Nesting a layout

# Layout Manager: Nesting a layout

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

View example in new window.

## 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.

var layout = new YAHOO.widget.Layout({ }); layout.render();

## Setting up the first Layout's Units

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

var layout = new YAHOO.widget.Layout({ units: [ { position: 'top', height: 50, resize: false, body: 'top1', header: 'Top', gutter: '5px', collapse: true, resize: true }, { position: 'right', header: 'Right', width: 300, resize: true, gutter: '2px 5px', footer: 'Footer', collapse: true, scroll: true, body: 'right1' }, { position: 'bottom', header: 'Bottom', height: 100, resize: true, body: 'bottom1', gutter: '5px', collapse: true }, { position: 'left', header: 'Left', width: 200, resize: true, body: 'left1', gutter: '2px 5px', collapse: true, collapseSize: 50, scroll: true }, { position: 'center' } ] }); layout.render();

## 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.

var layout = new YAHOO.widget.Layout({ units: [ //Snipped ] }); layout.on('render', function() { var el = layout.getUnitByPosition('center').get('wrap'); var layout2 = new YAHOO.widget.Layout(el, { parent: layout, units: [ { position: 'top', header: 'Top 2', height: 30, gutter: '2px' }, { position: 'right', header: 'Right 2', width: 90, resize: true, proxy: false, body: 'Right Content Data', collapse: true, gutter: '2px 2px 2px 5px' }, { position: 'left', header: 'Left 2', width: 90, resize: true, proxy: false, body: 'Left Content Data', gutter: '2px 5px 2px 2px', collapse: true }, { position: 'center', body: 'center2', gutter: '2px', scroll: true } ] }); layout2.render(); }); layout.render();

## Full Example Source

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; Event.onDOMReady(function() { var layout = new YAHOO.widget.Layout({ minWidth: 1000, minHeight: 500, units: [ { position: 'top', height: 50, resize: false, body: 'top1', header: 'Top', gutter: '5px', collapse: true, resize: true, maxHeight: 100 }, { position: 'right', header: 'Right', width: 300, resize: true, gutter: '2px 5px', footer: 'Footer', collapse: true, scroll: true, body: 'right1', maxWidth: 400 }, { position: 'bottom', header: 'Bottom', height: 100, resize: true, body: 'bottom1', gutter: '5px', collapse: true, maxHeight: 130 }, { position: 'left', header: 'Left', width: 200, resize: true, body: 'left1', gutter: '2px 5px', collapse: true, collapseSize: 50, scroll: true, maxWidth: 300 }, { position: 'center', minWidth: 400, minHeight: 200 } ] }); layout.on('render', function() { var el = layout.getUnitByPosition('center').get('wrap'); var layout2 = new YAHOO.widget.Layout(el, { parent: layout, minWidth: 400, minHeight: 200, units: [ { position: 'top', header: 'Top 2', height: 30, gutter: '2px', maxHeight: 80 }, { position: 'right', header: 'Right 2', width: 90, resize: true, proxy: false, body: 'Right Content Data', collapse: true, gutter: '2px 2px 2px 5px', maxWidth: 200 }, { position: 'left', header: 'Left 2', width: 90, resize: true, proxy: false, body: 'Left Content Data', gutter: '2px 5px 2px 2px', collapse: true, maxWidth: 200 }, { position: 'center', body: 'center2', gutter: '2px', scroll: true } ] }); layout2.render(); }); layout.render(); }); })();

## 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.

### Layout Manager Examples:

- Full Page Layout
- Layout inside a resizable Panel
- Using a Layout with Grids CSS
- Nesting a layout
- Layout with Menu Controls
- Simple Application
- Complex Application
- Skinning a Layout

### More Layout Manager Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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