Here is code snippet from layout gsp, eg main.gsp:
<head>
...
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
var layout1 = new YAHOO.widget.Layout({
minWidth: 1000,
units: [
{ position: 'top', height: 45, body: 'top1' },
{ position: 'left', width: 190, resize: true, body: 'left1', gutter: '2px', header: leftHeader,
collapse: true, scroll: true },
{ position: 'center' }
]
});
layout1.on("render", function(){
var el = layout1.getUnitByPosition('center').get('wrap');
var layout2= new YAHOO.widget.Layout(el, {
parent: layout1,
units: [
{ position: 'top', height: 45, body: 'top2', gutter: '2px' } ,
{ position: 'center', body: 'center2', gutter: '2px' },
{ position: 'bottom', height: bottomHeight, resize: true, body: 'bottom2',
scroll: true, gutter: '2px' }
]
});
layout2.on("resize", function(){
YAHOO.util.Dom.setStyle(center2ContentId, 'height', ((layout2.getSizes().center.h - 7) + 'px'));
});
layout2.render();
});
layout1.render();
init();
});
</script>
</head>
<body class="${pageProperty(name:'body.class')}">
<div id="top1">
<div id="logo"></div>
</div>
<div id="left1">
<g:pageProperty name="page.layout1.left.content"/>
</div>
<div id="top2">
<div id="toolbar"></div>
</div>
<div id="center2">
<g:pageProperty name="page.layout2.center.content"/>
</div>
<div id="bottom2">
<g:pageProperty name="page.layout2.bottom.content"/>
</div>
<g:pageProperty name="page.other"/>
</body>
init() and <g:pageProperty> is just placeholder, you can override it in your any gsp decorated by this layout. For example:
<head>
<script type="text/javascript">
// your own js code is here
...
// define your init function
var init= function(){...};
</script>
</head>
<!-- define your page content -->
<body class="yui-skin-sam">
<content tag="layout1.left.content"></content>
<content tag="layout2.center.content">
<div id="..."></div>
</content>
<content tag="layout2.bottom.content">
<div id="...">
<div class="..."></div>
</div>
</content>
<content tag="other">
<div id="how-to" style="text-align:left;">
......
</div>
</content>
</body>
It is noted that YUI Layout manager in this sample can also be replaced with othere ajax components lib(eg extjs or dojo) without too much hard work.
Posts
No comments:
Post a Comment