PDA

View Full Version : BorderLayout question



j555
11 Dec 2006, 9:07 PM
First of all I have to say yui-ext is great.

I am using the BorderLayout and I want to know if it is possible to start a region in the borderlayout collapsed. I then want the region to open upon clicking on an href in another region.

Thanks in advance for the help,
J

Herm
11 Dec 2006, 9:26 PM
Yep. If you go to Docs > Examples and Demos > Layouts - Complex Layout and click on the Center Panel tab, you will see it gives you an href to make the West region display.

Peter

jack.slocum
12 Dec 2006, 6:45 AM
To start it in standard collapsed mode, add the config collapsed:true. You can collapse and expand with code using the expand()/collapse() methods on the region.

j555
12 Dec 2006, 9:35 AM
Thanks for the replies. How would I execute and expand()/collapse() function on a region that is in an innerLayout within a layout. I unfortunately need 2 many regions so I need an innerlayout. When I try to execute a function on the innerlayout I get a javascript error which says 'innerLayout' is undefined.

Thanks

brian.moeskau
12 Dec 2006, 10:31 AM
You should be able to call the same methods on any region, regardless of nesting, as long as the object reference and scope are valid. Please post the code you're using so we can take a look at it.

j555
12 Dec 2006, 10:57 AM
Here is the javascript code that I have. I get the error when I try to call the function Example.toggleCenter(). I am sure it is something I am overlooking as I am far from a javascript expert. I welcome any changes or suggestions anyone has. Here is the code:

<script type="text/javascript">
Example = function(){
return {
init : function(){
var layout = new YAHOO.ext.BorderLayout(document.body, {
north: {
autoScroll: false
},
west: {
split:true,
autoScroll: true,
initialSize: 150,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 200
},
east: {
split:true,
initialSize: 100,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 200
},
center: {
autoScroll: false
}
});
layout.beginUpdate();

layout.add('west', new YAHOO.ext.ContentPanel('outer-left', {title: 'Outer Left', fitToFrame:true, closable:false}));
layout.add('north', new YAHOO.ext.ContentPanel('header', {fitToFrame:true, closable:false}));
layout.add('east', new YAHOO.ext.ContentPanel('outer-right', {title: 'Outer Right', fitToFrame:true, closable:false}));

var innerLayout = new YAHOO.ext.BorderLayout('content', {
east: {
split:true,
initialSize: 500,
minSize: 100,
maxSize: 500,
autoScroll:true,
collapsible:true,
titlebar: true
},
center: {
autoScroll:true,
titlebar: true
}
});
innerLayout.add('east', new YAHOO.ext.ContentPanel('inner1', "inner1"));
innerLayout.add('center', new YAHOO.ext.ContentPanel('inner2', "inner2"));
innerLayout.getRegion('east').hide();

layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout));
layout.endUpdate();
},
toggleCenter : function(link){ var centerRegion = layout.getRegion('center');
if(centerRegion.isVisible()){
centerRegion.hide();
link.innerHTML = 'Show Center Region';
}else{
centerRegion.show();
link.innerHTML = 'Hide Center Region';
}
}

}

}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>

<!--
here is the call to make the region toggle
Show Center Region (#)
-->

tryanDLS
12 Dec 2006, 11:14 AM
It looks like maybe the 'layout' var is private to init and null in toggleCenter??

j555
12 Dec 2006, 11:48 AM
Sorry there was a typo in the code, the following line was wrong:

toggleCenter : function(link){ var centerRegion = layout.getRegion('center');

it should read:

toggleCenter : function(link){ var centerRegion = innerLayout.getRegion('center');

j555
12 Dec 2006, 12:05 PM
Thank you for your help, you were right about the variable being private. I made the change and all is working now.