View Full Version : Switch Tabs

31 Oct 2006, 1:45 AM
On your Example 6 layout page (http://www.jackslocum.com/blog/examples/layout6.htm) is there a way I can make the "Auto Tabs" section show when the user clicks on the "Center Panel" tab?

31 Oct 2006, 2:05 AM
There are events for everything. For this one, you could listen for the "activate" event on the center panel and when it activates call showPanel on the east region passing in the autoTabs panel (or id).

31 Oct 2006, 2:20 AM
Thanks for your response. The showPanel method worked great - I've just got to attach it now via the activate event so I'll go and see what documentation I can find on adding events. Thanks again.

31 Oct 2006, 2:27 AM
layout.getRegion('center').getPanel('panel-id').on('activate', ...);

This is much shorter if you already have a reference to the panel:

var p = new YAHOO.ext.ContentPanel(...);
p.on('activate', yourFunction);
layout.add('center', p);

31 Oct 2006, 3:00 AM
Is there a list of events as I can't seem to find them in the documentation? The 'activate' event seems to just happen the once (when the page loads) so I'll need to use a different event as I only want it to happen when the user actually clicks the 'Center Panel' tab.

31 Oct 2006, 3:42 AM
Activate fires when the panel becomes the active panel (when the user changes to that tab). I just tested it in a variety of scenarios and it works as expected. Are you listening to the correct panel?

31 Oct 2006, 3:42 AM
BorderLayout isn't documented yet. It will be soon (before the release).

31 Oct 2006, 4:45 AM
Hmm, I must be doing something wrong then if it fires each time it is clicked in your example. Here's the changes I made to your "Layout 6" example:

Example = function(){
var layout;
return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
initialSize: 25,
titlebar: false
west: {
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
east: {
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
south: {
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true
center: {
titlebar: true,

var propsGrid = new YAHOO.ext.grid.PropsGrid('props-panel');
// bogus object as a data source
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'Todays Report Log', closable: true}));
layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'Report Viewer'}));
layout.add('east', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
layout.add('east', new YAHOO.ext.GridPanel(propsGrid, {title: 'Properties', closable: false}));
layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'Download Report', closable: false}));
layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Report Settings', closable: false}));
layout.getRegion('center').getPanel('center2').on('activate', Example.showAutoTab()); // User Addition

toggleWest : function(link){
var west = layout.getRegion('west');
link.innerHTML = 'Show West Region';
link.innerHTML = 'Hide West Region';
showAutoTab : function(){

YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);

I've marked the line I added with a "User Addition" comment.

It only fires once when the page loads (Firefox 2.0) so I must be mis-interpreting what you are telling me to do.

31 Oct 2006, 2:33 PM
The problem is you are executing the alert immediately instead of passing a callback:

layout.getRegion('center').getPanel('center2').on('activate', Example.showAutoTab());

The "()" at the end says to execute the function now.

Try this:

layout.getRegion('center').getPanel('center2').on('activate', Example.showAutoTab, Example, true);

The change says: passing a function pointer (callback) of Example.showAutoTab with a scope of Example (the this object) and you want to override the default scope (true).

1 Nov 2006, 2:26 AM
Ah, I see. Thanks for the great explanation.