Undocumented: Hack the LayoutRegion-tools

Published by: cfz 2010-03-14

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:

Tools & Environment - Page 2 - Ext JS Forums::
Page 2-Tools & Environment Ext: Open Discussion Undocumented: Hack the LayoutRegion-tools. Choleriker. Ext: Examples and Extras. 3
http://extjs.com/forum/showthread.php?t=422&page=2HOME

Dom Helper Reserved Word Hack - Ext JS Forums::
Dom Helper Reserved Word Hack Ext 1.x: Help Undocumented: Hack the LayoutRegion-tools. Choleriker. Ext: Examples and Extras. 3
http://extjs.com/forum/showthread.php?p=1065HOME

.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.

Ext: Examples and Extras [Archive] - Ext JS Forums::
[Archive] Post links to show what you have done with Ext Undocumented: Hack the LayoutRegion-tools. Application Definition Language
http://extjs.com/forum/archive/index.php/f-7.htmlHOME

Tools & Environment - Page 2 - Ext JS Forums::
Tools & Environment Ext: Open Discussion Undocumented: Hack the LayoutRegion-tools. Choleriker. Ext: Examples and Extras. 3
http://extjs.com/forum/showthread.php?p=3115HOME

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!

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

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.

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