Problem with LayoutRegion.setActivePanel ??

[tryanDLS]

Jack,

Not sure if it's a bug or I'm just mis-using this method. I've chopped off most of the code, hopefully this is enough to make sense. After adding 5 panels to a region, I'm then trying to make something other that the last one active.

var pane =this.layout.getRegion('center').getPanel('centerPane');
var l = pane.layout;
l.beginUpdate();
var t0 = YAHOO.ext.DomHelper.append(document.body, {tag:'t0', frameBorder: 0});
l.add('north', new YAHOO.ext.ContentPanel(t0, {title:'Agency', autoCreate:false}));
l.add('north', new YAHOO.ext.ContentPanel('t1', {title:'Products', autoCreate:true, closable:true}));
l.add('north', new YAHOO.ext.ContentPanel('t2', {title:'Marketing', autoCreate:true, closable:true}));
l.add('north', new YAHOO.ext.ContentPanel('t3', {title:'Education', autoCreate:true, closable:true}));
l.add('north', new YAHOO.ext.ContentPanel('t4', {title:'Reference', autoCreate:true, closable:true}));
l.endUpdate();

So far, so good - everything is build/rendered. Now I try to set the 1st panel active by doing.
l.getRegion('north').setActivePanel('t0');
or
l.getRegion('north').setActivePanel('Agency');

The panel is not found. The way the method looks for a panel when the arg is a string is my problem. I tried creating the panels a couple ways t0 vs t1 above, and neither works. In the case of t0, the id is a generated one, and in the case of t1, it's undefined. Not sure how the 1st line of setActivePanel is supposed to match when it's a string. I suppose if I passed a string '0', JS might return the 1st item, by just convering it to numeric.

Am I off base here? If I'm just not calling it right, let me know.
You might consider another safety check in here regardless of the above. If the panel isn't found, for whatever reason, I don't think the code shouldn't continue and eventually hit a null ref. Maybe just exit without deactivating the initial active panel??

[tryanDLS]

As a follow on to the above, maybe the way I'm adding the panels is flawed. Could this be the reason why closing the last tab to be added works, but after that closing others results in a 'tab has no properties' error?

[jack.slocum]

What is a t0 element? (tag: 't0')

There is a bug for autoCreate that has been fixed. You can also now pass a DomHelper creation object for autoCreate. I will get out beta2 with this fix soon.

setActivePanel expects an id or a panel object. Passing a title is not supported.

[tryanDLS]

Oh, the light goes on - 'tag' is HTML tag, not the id of the element to create!

What do you think about adding a way to get a panel by title? Given an example something like mine, where you might be auto-gening a unknown number of ContentPanels and getting the titles from a DB, I could see functionality that would need to make one of those active based on some other user interaction, that's more likely to to have the title.

Or, maybe the autoCreate could build the IDs based on a std way that includes the title, that way accessing the panel could be done by client code by apppending a std prefix+title as the arg??

[tryanDLS]

My code is now working pretty well, except for getting the 1st panel added to be active. The setActivePanel(p0) call executes and calls getContent correctly, but doesn't make the panel active. Clicking on any panel triggers getContent, so it appears to be wired correctly.


buildLayout: function() {
<snip>layout setup</setup>
var pane = this.layout.getRegion('center').getPanel('centerPane');
var l = pane.layout;
// this in reality comes from a DB and the nodes are more than simple titles
var nodes = {title:'Agency'}, {title:'Products'}, {title:'Marketing'}, {title:'Education'}, {title:'Reference'}];

l.beginUpdate();
var p0;
for (var i=0; i<nodes.length; i++) {
var el = YAHOO.ext.DomHelper.append(document.body, {tag:'div', frameBorder: 0});
var panel = new YAHOO.ext.ContentPanel(el, {title:nodes[i].title, autoCreate:true, node:nodes[i]});
l.add('north', panel);
panel.on('activate', this.getContent, this, true);
if (i==0) p0 = panel;
}

l.endUpdate();
l.getRegion('north').setActivePanel(p0);
},

getContent: function(panel, obj)
{
//alert('getContent:' + panel.getTitle() + '-' + panel.node.title);
return true;
}

[ojintoad]

Bump.

It looks like the code does activate the panel (confirmed by looking at which panel is active by getActivePanel and checking the title), but doesn't activate the actual tab on top should it be tabbed. Each region has a .tabs object which corresponds to a tab panel. This code has worked for me so far:

var centerRegion = this.layout.getRegion('center'); //or whatever region it is you're trying to get
//centerRegion.activatePanel(0); //Not needed
centerRegion.tabs.activate(0);


Edit: actually, it turns out that just activating the tab works.

[jack.slocum]

This may be fixed in the latest code as well.

You can get it at http://code.google.com/p/yui-ext/ :)