Creating a custom LayoutRegion?

[dlibby00]

I need to write a custom BorderLayout region to (among other things) change the location of the title element in a region to the bottom. After a little bit of time spellunking from the code I found the portion that needs to be changed in the LayoutRegion constructor:


/** This regions title element @type YAHOO.ext.Element */
this.titleEl = dh.append(this.el.dom, {tag: 'div', unselectable: 'on', cls: 'yunselectable ylayout-panel-hd ylayout-title-'+this.position, children:[
{tag: 'span', cls: 'yunselectable ylayout-panel-hd-text', unselectable: 'on', html: ' '},
{tag: 'div', cls: 'yunselectable ylayout-panel-hd-tools', unselectable: 'on'}
]}, true);
this.titleEl.enableDisplayMode();
/** This regions title text element @type HTMLElement */
this.titleTextEl = this.titleEl.dom.firstChild;
this.tools = getEl(this.titleEl.dom.childNodes[1], true);
this.closeBtn = this.createTool(this.tools.dom, 'ylayout-close');
this.closeBtn.enableDisplayMode();
this.closeBtn.on('click', this.closeClicked, this, true);
this.closeBtn.hide();
/** This regions body element @type YAHOO.ext.Element */
this.bodyEl = dh.append(this.el.dom, {tag: 'div', cls: 'ylayout-panel-body'}, true);


If I change the order of creation for titleEl and bodyEl I get the behavior I need. I decided the least intrusive way to implement this change would be for me to define a new YAHOO.ext.LayoutRegion constructor which I did in a file included after yui-ext.js. However when I created my BorderLayout instance the new LayoutRegion constructor was not called. I think this probably has to do with the fact that the SplitLayoutRegion class' superclass constructor instance has already been stored before I re-define the LayoutRegion constructor.

If this is the case, it would mean that I need to define an entirely new class which extends LayoutRegion. That in and of itself is not that big a deal. Unfortunately it seems as though I also need to define a new SplitLayoutRegion which extends my newly defined LayoutRegion and duplicates all of the methods in SplitLayoutRegion which seems a bit tedious. I'm just wondering if there is an easier way to re-define a low level class and not have to completely re-define the entire inheritance chain, or if there is an easier way to do what I need short of modifying the actual yui-ext source.

Thainks in advance,

Derek

[jack.slocum]

You could probably do:

yourRegion.titleEl.dom.parentNode.appendChild(yourRegion.titleEl.dom);

It's long but it should work.

[dlibby00]

Ultimately I have decided that the BorderLayout class is just too heavyweight for my purposes.

Since I only need a single panel to collapse I have just decided to use a div and a blind up/down effect to get the desired behavior. I think it will also make the code easier to maintain as everything is laid out in html and only the animation is accomplished in Javascript.

I'm using the script.aculo.us effects for the moment, but I really would like my app to be completely yui. Has anybody seen a good example of this effect written with YUI? The script.aculo.us version just seems much smoother than anything else I have seen. I'm going to try and duplicate this wit a YUI animation, will post results here when done.

[brian.moeskau]

http://www.yui-ext.com/deploy/yui-ext/docs/output/YAHOO.ext.Actor.html#blindShow