YUI Extension Usage.
// description of your code here
<html> <head> <title>Layout 6</title> <!-- begin common includes --> <link rel="stylesheet" type="text/css" href="/blog/css/reset-min.css"> <script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.6.js"></script> <script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.5.js"></script> <script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.6.js"></script> <script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dragdrop_2.0.6.js"></script> <script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/animation_2.0.5.js"></script> <script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/connection_2.0.5.js"></script> <script type="text/javascript" src="http://www.jackslocum.com/blog/javascript/util.js"></script> <script type="text/javascript" src="http://www.jackslocum.com/build/yui-ext_33.js"></script> <script type="text/javascript" src="http://www.jackslocum.com/blog/javascript/ie-bg.js"></script> <!-- end common includes --> <link rel="stylesheet" type="text/css" href="http://www.jackslocum.com/blog/css/tabs.css"/> <link rel="stylesheet" type="text/css" href="http://www.jackslocum.com/blog/css/layout.css"/> <link rel="stylesheet" type="text/css" href="http://www.jackslocum.com/blog/css/grid.css"/> <script language="javascript" src="http://www.jackslocum.com/blog/examples/PropsGrid.js"></script> <style type="text/css"> body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;} .ylayout-panel-north { border:0px none; background-color:#c3daf9; } #nav { } #autoTabs, #center1, #center2, #west { padding:10px; } #north, #south{ font:normal 8pt arial, helvetica; padding:4px; } .ylayout-panel-center p { margin:5px; } #props-panel .ygrid-col-0{ } #props-panel .ygrid-col-1{ } </style> <script type="text/javascript"> Example = function(){ var layout; return { init : function(){ layout = new YAHOO.ext.BorderLayout(document.body, { hideOnLayout: true, north: { split:false, initialSize: 25, titlebar: false }, west: { split:true, initialSize: 200, minSize: 175, maxSize: 400, titlebar: true, collapsible: true }, east: { split:true, initialSize: 202, minSize: 175, maxSize: 400, titlebar: true, collapsible: true }, south: { split:true, initialSize: 100, minSize: 100, maxSize: 200, titlebar: true, collapsible: true }, center: { titlebar: true, autoScroll:true } }); var propsGrid = new YAHOO.ext.grid.PropsGrid('props-panel'); // bogus object as a data source propsGrid.setSource({ "(name)": "Properties Grid", "grouping": false, "autoFitColumns": true, "productionQuality": false, "created": new Date(Date.parse('10/15/2006')), "tested": false, "version": .01, "borderWidth": 1 }); propsGrid.render(); layout.beginUpdate(); layout.add('north', new YAHOO.ext.ContentPanel('north', 'North')); layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'South', closable: true})); layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'})); layout.add('east', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true})); layout.add('east', new YAHOO.ext.GridPanel(propsGrid, {title: 'Properties', closable: true})); layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'Close Me', closable: true})); layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Center Panel', closable: false})); layout.getRegion('center').showPanel('center1'); layout.getRegion('west').hide(); layout.endUpdate(); }, toggleWest : function(link){ var west = layout.getRegion('west'); if(west.isVisible()){ west.hide(); link.innerHTML = 'Show West Region'; }else{ west.show(); link.innerHTML = 'Hide West Region'; } } } }(); YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true); </script> </head> <body> <div id ="container"> <div id="west" class="ylayout-inactive-content"> Hi. I'm the west panel. </div> <div id="north" class="ylayout-inactive-content"> north - generally for menus, toolbars and/or advertisements </div> <div id="autoTabs" class="ylayout-inactive-content"> The layout manager will automatically create and/or remove the TabPanel component when a region has more than one panel. Close one of my panels and you can see what I mean. </div> <div id="center2" class="ylayout-inactive-content"> <p><a href="#" onclick="Example.toggleWest(this);return false;">Show West Region</a></p> <p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p> <p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p> <hr> </div> <div id="center1" class="ylayout-inactive-content"> <p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p> </div> <div id="props-panel" class="ylayout-inactive-content" style="width:200px;height:200px;overflow:hidden;"> </div> <div id="south" class="ylayout-inactive-content"> south - generally for informational stuff, also could be for status bar </div> </div> </body> </html>