PDA

View Full Version : Differences in TreeNode Contructor and Object Literal As Child Nodes



Sledge
11 Apr 2011, 2:24 PM
Windows 7 x64
Firefox 3.6.16 w/ Firebug 1.6.2
ExtJS 3.3.1

So I have the following code below, and for the life of me, I can't figure out why clicking on child 2 fails to trigger an alert when clicking on child 1 succeeds. Could someone shed some light on this for me?

Thanks!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tree Test</title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript">
//<![CDATA[
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';

var root = {
text : 'Root',
children : [{
text : 'Child 1',
leaf : true,
listeners : {
click : function( node, evtObj ){
Ext.MessageBox.alert('child 1 alert', "child 1 Alert!");
},
},
},
new Ext.tree.TreeNode({
text : 'Child 2',
leaf : true,
listeners : {
click : function( node, evtObj ){
Ext.MessageBox.alert('child 2 alert', "child 2 Alert!");
},
},
}),],
};

Ext.onReady(function(){
new Ext.tree.TreePanel({
loader : new Ext.tree.TreeLoader(),
useArrows : true,
renderTo : 'app',
root : new Ext.tree.AsyncTreeNode(root),
});
});
//]]>
</script>
</head>

<body>
<div id="app"></div>
</body>
</html>

Screamy
12 Apr 2011, 9:05 AM
It doesn't really answer your question, but here's a better way to handle tree node clicks:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tree Test</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript">
//<![CDATA[
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

var root = {
text : 'Root',
children : [{
text : 'Child 1',
leaf : true
},
new Ext.tree.TreeNode({
text : 'Child 2',
leaf : true
}),],
};

Ext.onReady(function(){
new Ext.tree.TreePanel({
listeners: {
click: function(node, evt) {
Ext.Msg.alert('Node Clicked!', 'Node clicked is: ' + node.attributes.text);
}
},
loader : new Ext.tree.TreeLoader(),
useArrows : true,
renderTo : 'app',
root : new Ext.tree.AsyncTreeNode(root),
});
});
//]]>
</script>
</head>

<body>
<div id="app"></div>
</body>
</html>

Sledge
12 Apr 2011, 1:57 PM
That'll be better for when I want all the nodes to have the same behavior for a given event. Otherwise, I'd rather assign listeners (or refrain from assigning listeners) on a node-by-node basis.