Yahoo! Developer Network Home - Help

Site Search (YDN & YUIBlog):

# YUI Library Examples: Layout Manager (beta): Layout inside a resizable Panel

# Layout Manager (beta): Layout inside a resizable Panel

This example shows how to build a layout inside of a resizable Panel Control.

View example in new window.

## Create the Panel

First we must create the panel instance, like this:

<div id="demo"></div> var panel = new YAHOO.widget.Panel('demo', { draggable: true, close: false, width: '500px', xy: [100, 100] }); panel.render();

Now let's give it some content. Note that we are adding a DIV to the body with an id of `layout`. This will be the element we anchor the layout to.

var panel = new YAHOO.widget.Panel('demo', { draggable: true, close: false, width: '500px', xy: [100, 100] }); panel.setHeader('Test Panel'); panel.setBody('<div id="layout"></div>'); panel.render();

## Adding the Layout instance

Now we need to listen for the `beforeRender` event to render our Layout.

Inside of the `beforeRender` event, we will wait for the element `layout` to appear in the document, then we will setup our Layout instance.

The layout instance we are creating will have top, left, bottom and center units configured below:

panel.setBody('<div id="layout"></div>'); panel.beforeRenderEvent.subscribe(function() { Event.onAvailable('layout', function() { layout = new YAHOO.widget.Layout('layout', { height: 400, units: [ { position: 'top', height: 25, resize: false, body: 'Top', gutter: '2' }, { position: 'left', width: 150, resize: true, body: 'Left', gutter: '0 5 0 2', minWidth: 150, maxWidth: 300 }, { position: 'bottom', height: 25, body: 'Bottom', gutter: '2' }, { position: 'center', body: 'Center Unit', gutter: '0 2 0 0' } ] }); layout.render(); }); }); panel.render();

Now we have a layout inside of a Panel.

## Make the Panel resizable

After we have rendered our panel, we can attach the Resize Utility to it like this:

panel.render(); resize = new YAHOO.util.Resize('demo', { handles: ['br'], autoRatio: true, status: true, minWidth: 380, minHeight: 400 });

Now give the resize handle a little CSS to make it look nicer.

#demo .yui-resize-handle-br { height: 11px; width: 11px; background-position: -20px -60px; background-color: transparent; }

This will place a handle at the bottom right corner of the panel. This will only resize the outside portion of the panel, but we want the inside to resize properly.

Now we need to listen for the `resize` event on the Resize instance and do a little math.

resize.on('resize', function(args) { var panelHeight = args.height; var headerHeight = this.header.offsetHeight; // Content + Padding + Border var bodyHeight = (panelHeight - headerHeight); var bodyContentHeight = (IE_QUIRKS) ? bodyHeight : bodyHeight - PANEL_BODY_PADDING; YAHOO.util.Dom.setStyle(this.body, 'height', bodyContentHeight + 'px'); if (IE_SYNC) { // Keep the underlay and iframe size in sync. // You could also set the width property, to achieve the // same results, if you wanted to keep the panel's internal // width property in sync with the DOM width. this.sizeUnderlay(); // Syncing the iframe can be expensive. Disable iframe if you // don't need it. this.syncIframe(); } }, panel, true);

Now we have the Panel resizing the way we want, but the layout is not resizing to match. Inside the `resize` event from the Resize instance we need to add this at the bottom:

layout.set('height', bodyContentHeight); layout.set('width', (args.width - PANEL_BODY_PADDING)); layout.resize();

Now we have a resizable panel with a fixed layout inside.

## Full Example Source

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, layout = null, resize = null; Event.onDOMReady(function() { // Setup constants // QUIRKS FLAG, FOR BOX MODEL var IE_QUIRKS = (YAHOO.env.ua.ie && document.compatMode == "BackCompat"); // UNDERLAY/IFRAME SYNC REQUIRED var IE_SYNC = (YAHOO.env.ua.ie == 6 || (YAHOO.env.ua.ie == 7 && IE_QUIRKS)); // PADDING USED FOR BODY ELEMENT (Hardcoded for example) var PANEL_BODY_PADDING = (10*2) // 10px top/bottom padding applied to Panel body element. The top/bottom border width is 0 var panel = new YAHOO.widget.Panel('demo', { draggable: true, close: false, underlay: 'none', width: '500px', xy: [100, 100] }); panel.setHeader('Test Panel'); panel.setBody('<div id="layout"></div>'); panel.beforeRenderEvent.subscribe(function() { Event.onAvailable('layout', function() { layout = new YAHOO.widget.Layout('layout', { height: 400, width: 480, units: [ { position: 'top', height: 25, resize: false, body: 'Top', gutter: '2' }, { position: 'left', width: 150, resize: true, body: 'Left', gutter: '0 5 0 2', minWidth: 150, maxWidth: 300 }, { position: 'bottom', height: 25, body: 'Bottom', gutter: '2' }, { position: 'center', body: 'Center Unit', gutter: '0 2 0 0' } ] }); layout.render(); }); }); panel.render(); resize = new YAHOO.util.Resize('demo', { handles: ['br'], autoRatio: true, status: true, minWidth: 380, minHeight: 400 }); resize.on('resize', function(args) { var panelHeight = args.height; var headerHeight = this.header.offsetHeight; // Content + Padding + Border var bodyHeight = (panelHeight - headerHeight); var bodyContentHeight = (IE_QUIRKS) ? bodyHeight : bodyHeight - PANEL_BODY_PADDING; YAHOO.util.Dom.setStyle(this.body, 'height', bodyContentHeight + 'px'); if (IE_SYNC) { // Keep the underlay and iframe size in sync. // You could also set the width property, to achieve the // same results, if you wanted to keep the panel's internal // width property in sync with the DOM width. this.sizeUnderlay(); // Syncing the iframe can be expensive. Disable iframe if you // don't need it. this.syncIframe(); } layout.set('height', bodyContentHeight); layout.set('width', (args.width - PANEL_BODY_PADDING)); layout.resize(); }, panel, true); }); })();

### Layout Manager (beta) Examples:

### More Layout Manager (beta) Resources:

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

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