Leaf on TreeNode open in iframe (or ContentPanel)

[SwellJoe]

I've got a tree in a left-hand content panel that acts as a menu for the center content panel. I can't seem to convince it to actually open in the center panel, however. It always loads it into the whole page.

Here's what I've been trying to do (where tree is my TreePanel:


tree.on('click', function (node){
if(!node.isLeaf()){
console.info("Not a leaf! " + node);
node.toggle();
} else {
console.info("Got a leaf! " + node);
getEl('right').dom.src = node.findTarget(null, 'a');
}
});


And the first bit (to open parent nodes when clicked) works...but the second bit is never reached (or doesn't seem to be...I can't really tell because it then opens a new page and refreshes the console so any messages that were there disappear).

An odd side note, which may actually be germane to my primary problem: the "click to open" parent node code actually requires a double click to open. So I suspect something else is sucking up the first click...it's built from markup and has a dummy link "#", so the parent node opening might be catching a link handler first. Which I guess might be whats happening in the leaf node case, as well.

So, I guess I'd like to know how to unhook the default click handler for these elements, or some guidance on how to debug something that is loading into a new page...I suspect I could make more sense of it if any of my console logging worked. ;-)

Thanks!

[Animal]

You can't unhook the default click handler for <a> elements. What you can do is add your own click handler using the documented methods. Cancel the event, and then
do the load of the center ContentPanel using documented methods.

[jack.slocum]

If your iframe has an id ('right'?), you could set it up automatically with the node attributes:

var node = new Ext.tree.TreeNode({
href: 'foo.php',
hrefTarget: 'right'
});

Those are the same attributes you'd supply via a TreeLoader.

Other than that your code looks like a mix of different APIs. findTarget is not a method of node, it's a method of an event. You could do the same as above without the hrefTarget attribute using:

tree.on('click', function (node){
if(!node.isLeaf()){
console.info("Not a leaf! " + node);
node.toggle();
} else {
console.info("Got a leaf! " + node);
getEl('right').dom.src = node.attributes.href; <-- changed
}
});

[SwellJoe]

var node = new Ext.tree.TreeNode({
href: 'foo.php',
hrefTarget: 'right'
});


That's exactly what I was looking for! I'd been trying to use target, but couldn't figure out what to call it. (I'm afraid I'm still quite new to JavaScript, so sometimes things that may seem obvious are not apparent to me.)

Thanks, Jack.