View Full Version : NavBar inside BorderLayout

27 Nov 2006, 3:35 PM

before venturing into writing a new LayoutManager, I was making some more practice with YUI-ext.

I was trying to put a NavBar component (the one used in the previous version of Jack's own blog) inside the central region a BorderLayout configuration.

I have a fixed north region, and a collapsible sourth region (no east nor west at the moment).

I have almost managed to stick it in the right place (fixing some javascript here and some css there), but I am struggling in find a reliable way to find the size of the central region.

In the original NavBar implementation, there is this method:

getBodyDimensions : function(){
return {
width: YAHOO.util.Dom.getViewportWidth()-/*pad*/4,
height: YAHOO.util.Dom.getViewportHeight() - (getEl('blog-header').getHeight()+8)

I need a way to replace this values (measuring the size of the whole window) with the size of the central region.

I have tried with the following:

getBodyDimensions : function(){
return this.borderLayoutManager.getRegion('center').getEl().getSize();

This come close, but I get the scollbar showing, even if no content overflow, but I immagine for some "bit overflow".

Any suggestion on how I could try to fix this?

27 Nov 2006, 3:41 PM
I would override the setSize function. This is what I initially did in the new blog layout and it worked well (I ended up replacing it though with a reusable version). Use a push resize instead of a pull.

layout.add('center', new ContentPanel(...)).override({
setSize : function(w, h){
// w and h will be the width and height of the body portion of the panel
// set navbar size here.

29 Nov 2006, 3:19 AM

I have tried your suggestion (hoping to have got it right), but something is not working right.

As for your suggestion, I have overridden the setSize method:

layout.add('center', new YAHOO.ext.ContentPanel('records',
{title:"records", closable:false, autoCreate:false})).override({
'setSize': function(w, h) {
YAHOO.ext.ContentPanel.prototype.setSize.call(this, w, h);

This could should call the original version of the setSize method, and then "put resize" the bodySize of the element containing the NavBar. The setBodySize stores the given size into a variable, whose value is later returned by the getBodyDimensions method.

Adding a few log statements, I have noticed a few odd things:
- the original implementation of ContentPanel.setSize does nothing, as 'fitToFrame' is always undefined (I have neither found where it should get defined in the first place)
- the value of this.el.getSize().height is always 0
- if I "put resize" the Blog instance with the original parameters of the setSize method, I get the same behaviour I got before overriding the setSize method.

What am I missing so badly?

29 Nov 2006, 5:45 AM
fitToFrame fits the internal panel to the containing region.

Use the provided size, not "this.el.getSize()".

Blog.setBodySize({width: w, height: h});

29 Nov 2006, 6:45 AM
Use the provided size, not "this.el.getSize()".

I have tried this option too (
if I "put resize" the Blog instance with the original parameters of the setSize method, I get the same behaviour I got before overriding the setSize method. ) but the outcome is broken by the scrollbars.

I am now trying to put an example online.

29 Nov 2006, 7:02 AM

29 Nov 2006, 7:25 AM
I'm not sure what is going on. That's a lot of code to digest. Can you find a way to adjust the navbar directly rather than setting the blog size?

29 Nov 2006, 8:41 AM
Could this be related to the fitToFrame+autoWidth fix for ContentPanels?

30 Nov 2006, 12:29 AM
Where could I find some more details on the "fitToFrame+autoWidth" issue?

In the meanwhile, I will try to update from the SVN repository.

30 Nov 2006, 12:53 AM

30 Nov 2006, 3:19 AM
Thanks for the link. I will look into it carefully.

In the meanwhile, I have managed to achieve some basic results with my brand new layout manager: http://www.clipperz.com/files/example/layout/index.html

Any comment or suggestion is really welcome.

30 Nov 2006, 5:35 AM
It looks good. Did you throw some components into it?

30 Nov 2006, 5:45 AM
No, I haven't tried anything fancy yet, but I will start soon throwing in other components.

The current implementation is very raw, with no error detection/correction, as this was basically only a proof of concept.