Undocumented: Hack the LayoutRegion-tools

[Choleriker]

Hi,

i wanted to support the user with a help button like this:

http://tecbehind.de/useruploads/choleriker/LayoutRegionHack.jpg

So i have started to look jacks code how to do. Its very simple, so i have extended the LayoutRegion class:



YAHOO.ext.LayoutRegion.prototype.createToolButton = function(cls, fn, scope) {
var _btn = this.createTool(this.tools.dom, cls);
_btn.enableDisplayMode();
_btn.on('click', fn, scope, true);
return _btn;
};


Its based on a private method of the LayoutRegion createTool. If you want to try it, simple add a css class to your code:



.ylayout-help{
background-image:url('images/help.gif');
}


Save this image to your project: http://tecbehind.de/useruploads/choleriker/help.gif

And try this code, which, for simplicity, only alerts 'Jo!' after clicking the button.



var _region = LAY.getRegion('west');
_region.helpButton = _region.createToolButton('ylayout-help', function() {alert('Jo!');}, window);

Keep in mind that my layout-object is named LAY and i added the button to the west region, take another one if you dont have a west region.

The createToolButton returns the newly created button. If you switch between panels in the related region, the newly created button is always visible. If you dont want this, simply bind activate and deactivate events on the panels and call show() or hide() on the newly created button!

[Wolfgang]

Hello,

thank you for this example.
Works perfect when having only 2 buttons. But if they is a 3rd button, then the 3rd button shows up below the panels caption instead of showing next to the other buttons within the caption.

Any ideas why?

Regards

Wolfgang

[tryanDLS]

My guess would be that the container isn't wide enough. Use Firebug to see the generated HTML/CSS. This way you can determine what container may need to be bigger.

[Wolfgang]

Yes it was the css class "ylayout-panel-hd-tools" with the default width of 40px.
After i changed it it worked ok :)