YUI Library Home

YUI Library Examples: Layout Manager: Layout inside a resizable Panel

Layout Manager: Layout inside a resizable Panel

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

Create the Panel

First we must create the panel instance, like this:

1<div id="demo"></div> 
view plain | print | ?
1var panel = new YAHOO.widget.Panel('demo', { 
2    draggable: true
3    close: false
4    autofillheight: "body"// default value, specified here to highlight its use in the example             
5    width: '500px'
6    xy: [100, 100] 
7}); 
8panel.render(); 
view plain | print | ?

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.

1var panel = new YAHOO.widget.Panel('demo', { 
2    draggable: true
3    close: false
4    autofillheight: "body"// default value, specified here to highlight its use in the example             
5    width: '500px'
6    xy: [100, 100] 
7}); 
8panel.setHeader('Test Panel'); 
9panel.setBody('<div id="layout"></div>'); 
10panel.render(); 
view plain | print | ?

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:

1panel.setBody('<div id="layout"></div>'); 
2panel.beforeRenderEvent.subscribe(function() { 
3    Event.onAvailable('layout'function() { 
4        layout = new YAHOO.widget.Layout('layout', { 
5            height: 400, 
6            units: [ 
7                { position: 'top', height: 25, resize: false, body: 'Top', gutter: '2' }, 
8                { position: 'left', width: 150, resize: true, body: 'Left', gutter: '0 5 0 2', minWidth: 150, maxWidth: 300 }, 
9                { position: 'bottom', height: 25, body: 'Bottom', gutter: '2' }, 
10                { position: 'center', body: 'Center Unit', gutter: '0 2 0 0' } 
11            ] 
12        }); 
13 
14        layout.render(); 
15    }); 
16}); 
17panel.render(); 
view plain | print | ?

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:

1panel.render(); 
2resize = new YAHOO.util.Resize('demo', { 
3    handles: ['br'], 
4    autoRatio: true
5    status: true
6    minWidth: 380, 
7    minHeight: 400 
8}); 
view plain | print | ?

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

1#demo .yui-resize-handle-br { 
2    height11px
3    width11px
4    background-position-20px -60px
5    background-colortransparent
6} 
view plain | print | ?

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.

1var panelHeight = args.height, 
2padding = 20; 
3this.cfg.setProperty("height", panelHeight + 'px'); 
view plain | print | ?

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:

1var panelHeight = args.height, 
2padding = 20; 
3//Hack to trick IE into behaving 
4Dom.setStyle('layout''display''none'); 
5this.cfg.setProperty("height", panelHeight + 'px'); 
6layout.set('height'this.body.offsetHeight - padding); 
7layout.set('width'this.body.offsetWidth - padding); 
8//Hack to trick IE into behaving 
9Dom.setStyle('layout''display''block'); 
10layout.resize(); 
view plain | print | ?

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

Full Example Source

1(function() { 
2    var Dom = YAHOO.util.Dom, 
3        Event = YAHOO.util.Event, 
4        layout = null
5        resize = null
6 
7    Event.onDOMReady(function() { 
8        var panel = new YAHOO.widget.Panel('demo', { 
9            draggable: true
10            close: false
11            autofillheight: "body"// default value, specified here to highlight its use in the example             
12            underlay: 'none'
13            width: '500px'
14            xy: [100, 100] 
15        }); 
16        panel.setHeader('Test Panel'); 
17        panel.setBody('<div id="layout"></div>'); 
18        panel.beforeRenderEvent.subscribe(function() { 
19            Event.onAvailable('layout'function() { 
20                layout = new YAHOO.widget.Layout('layout', { 
21                    height: 400, 
22                    width: 480, 
23                    units: [ 
24                        { position: 'top', height: 25, resize: false, body: 'Top', gutter: '2' }, 
25                        { position: 'left', width: 150, resize: true, body: 'Left', gutter: '0 5 0 2', minWidth: 150, maxWidth: 300 }, 
26                        { position: 'bottom', height: 25, body: 'Bottom', gutter: '2' }, 
27                        { position: 'center', body: 'Center Unit', gutter: '0 2 0 0' } 
28                    ] 
29                }); 
30 
31                layout.render(); 
32            }); 
33        }); 
34        panel.render(); 
35        resize = new YAHOO.util.Resize('demo', { 
36            handles: ['br'], 
37            autoRatio: true
38            status: false
39            minWidth: 380, 
40            minHeight: 400 
41        }); 
42        resize.on('resize'function(args) { 
43            var panelHeight = args.height, 
44            padding = 20; 
45            //Hack to trick IE into behaving 
46            Dom.setStyle('layout''display''none'); 
47            this.cfg.setProperty("height", panelHeight + 'px'); 
48            layout.set('height'this.body.offsetHeight - padding); 
49            layout.set('width'this.body.offsetWidth - padding); 
50            //Hack to trick IE into behaving 
51            Dom.setStyle('layout''display''block'); 
52            layout.resize(); 
53             
54        }, panel, true); 
55    }); 
56})(); 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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