YUI Library Examples: Layout Manager: Nesting a 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.


1	var layout = new YAHOO.widget.Layout({
2	});
3	layout.render();
	view plain \| print \| ?

Setting up the first Layout's Units

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


1	var layout = new YAHOO.widget.Layout({
2	units: [
3	{ position: 'top', height: 50, resize: false, body: 'top1', header: 'Top', gutter: '5px', collapse: true, resize: true },
4	{ position: 'right', header: 'Right', width: 300, resize: true, gutter: '2px 5px', footer: 'Footer', collapse: true, scroll: true, body: 'right1' },
5	{ position: 'bottom', header: 'Bottom', height: 100, resize: true, body: 'bottom1', gutter: '5px', collapse: true },
6	{ position: 'left', header: 'Left', width: 200, resize: true, body: 'left1', gutter: '2px 5px', collapse: true, collapseSize: 50, scroll: true },
7	{ position: 'center' }
8	]
9	});
10	layout.render();
	view plain \| print \| ?

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.


1	var layout = new YAHOO.widget.Layout({
2	units: [
3	//Snipped
4	]
5	});
6	layout.on('render', function() {
7	var el = layout.getUnitByPosition('center').get('wrap');
8	var layout2 = new YAHOO.widget.Layout(el, {
9	parent: layout,
10	units: [
11	{ position: 'top', header: 'Top 2', height: 30, gutter: '2px' },
12	{ position: 'right', header: 'Right 2', width: 90, resize: true, proxy: false, body: 'Right Content Data', collapse: true, gutter: '2px 2px 2px 5px' },
13	{ position: 'left', header: 'Left 2', width: 90, resize: true, proxy: false, body: 'Left Content Data', gutter: '2px 5px 2px 2px', collapse: true },
14	{ position: 'center', body: 'center2', gutter: '2px', scroll: true }
15	]
16	});
17	layout2.render();
18	});
19	layout.render();
	view plain \| print \| ?

Full Example Source


1	(function() {
2	var Dom = YAHOO.util.Dom,
3	Event = YAHOO.util.Event;
4
5	Event.onDOMReady(function() {
6	var layout = new YAHOO.widget.Layout({
7	minWidth: 1000,
8	minHeight: 500,
9	units: [
10	{ position: 'top', height: 50, resize: false, body: 'top1', header: 'Top', gutter: '5px', collapse: true, resize: true, maxHeight: 100 },
11	{ position: 'right', header: 'Right', width: 300, resize: true, gutter: '2px 5px', footer: 'Footer', collapse: true, scroll: true, body: 'right1', maxWidth: 400 },
12	{ position: 'bottom', header: 'Bottom', height: 100, resize: true, body: 'bottom1', gutter: '5px', collapse: true, maxHeight: 130 },
13	{ position: 'left', header: 'Left', width: 200, resize: true, body: 'left1', gutter: '2px 5px', collapse: true, collapseSize: 50, scroll: true, maxWidth: 300 },
14	{ position: 'center', minWidth: 400, minHeight: 200 }
15	]
16	});
17	layout.on('render', function() {
18	var el = layout.getUnitByPosition('center').get('wrap');
19	var layout2 = new YAHOO.widget.Layout(el, {
20	parent: layout,
21	minWidth: 400,
22	minHeight: 200,
23	units: [
24	{ position: 'top', header: 'Top 2', height: 30, gutter: '2px', maxHeight: 80 },
25	{ position: 'right', header: 'Right 2', width: 90, resize: true, proxy: false, body: 'Right Content Data', collapse: true, gutter: '2px 2px 2px 5px', maxWidth: 200 },
26	{ position: 'left', header: 'Left 2', width: 90, resize: true, proxy: false, body: 'Left Content Data', gutter: '2px 5px 2px 2px', collapse: true, maxWidth: 200 },
27	{ position: 'center', body: 'center2', gutter: '2px', scroll: true }
28	]
29	});
30	layout2.render();
31	});
32	layout.render();
33	});
34	})();
	view plain \| print \| ?

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