PDA

View Full Version : Alpha2 TreePanel



mouglas
26 Feb 2007, 2:29 PM
Hi!

I am getting the following error when trying to expand nodes in a TreePanel:

this.node has no properties
ext-all-debug.js line 16268
if (!this.animating && this.node.hasChildNodes()){

My imports are as follows:

<script type="text/javascript" src="../../js/ext/jquery.js"></script>
<script type="text/javascript" src="../../js/ext/jquery-plugins.js"></script>
<script type="text/javascript" src="../../js/ext/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="../../js/ext/ext-all-debug.js"></script>

Thanks for any help you can provide...

tryanDLS
26 Feb 2007, 2:47 PM
Does the same thing happen if you switch to the ext-all.js file? It's possible there's something out of sync between the 2.

mouglas
26 Feb 2007, 2:53 PM
Yes, I get the same error with ext-all.js. It does, however, work when I use the yui libraries instead of jquery.

Thanks!

simeon
26 Feb 2007, 4:28 PM
Another issue with the alpha 2 tree control.
In IE7 and IE6 but not FF2: I get an extra blank row at the end of a list of nodes right after they are expanded.

My JSON:


[
{"text":"This is a message description","id":"1","cls":"message","type":1},
{
text: "The office will be closing tommorrow",
"id":"156735184315",
"cls":"message",
"children":[], // <-- preload children (which is no children)
"expanded": true, // expand immediately to prevent plus
"security":1,
"type":1
},
{
text: "This is a data node with children included",
"id":"156735184315",
"cls":"message",
"children": [
{"text":"Main Office Number","id":"6","children":[],"expanded": true,"cls":"message","type":1},
{"text":"Houston Office Number","id":"7","children":[],"expanded": true,"cls":"message","type":1},
{"text":"Dallas Office Number","id":"8","children":[],"expanded": true,"cls":"message","type":1}
],
"expanded": false, // expand immediately to prevent plus
"security":1,
"allowDrop":true,
"type":1
}
]


Simeon

tawmas
27 Feb 2007, 2:42 AM
The error originally reported is on line 135 in ext-all.js (or line 134 as reported by Firebug, but that appears to be a blank line), and is only visible when you use the jQuery adapter, under any browser I tried it with (IE7, FF2, Minefield nightlies).

This error also shows up in the documentation examples...

seldon
27 Feb 2007, 5:15 AM
This error of the blankline under the expaned nodes also occurs using 0.4. (in IE7). Any idea how to fix this?

simeon
27 Feb 2007, 8:23 AM
I had the same error on line 135 as well, but I found I had an extra comma.
Specifically, I had a comma after the last node in children array of my json.

simeon
27 Feb 2007, 11:41 AM
looks like the problem is in the ul tag at the end of each tree node's children.
it has class="x-tree-node-ct" but I don't see that class in the css files.

When I put this on my page It fixes the IE problems of adding an extra row.

ul.x-tree-node-ct{font-size:0px;line-height:0px;}

Jack, is this going to screw anything up with the tree? I am not sure what that empty UL is there for. I assume its to allow dropping at the end of a node list.

Simeon

jack.slocum
28 Feb 2007, 9:21 AM
It should be fine. I added it to the tree css prefixed by .ext-ie

JeffHowden
28 Feb 2007, 11:08 AM
The extra UL at the bottom was fixed in the 0.44 version of the tree panel. I'll scour the forums to see if I can find that fix.

Edit: So, I found the bit, but it doesn't give quite the desired effect. In TreeNode.js, the expand() method is:



expand : function(deep, anim, callback){
if(!this.expanded){
if(this.fireEvent("beforeexpand", this, deep, anim) === false){
return;
}
if(!this.childrenRendered){
this.renderChildren();
}
this.expanded = true;
if((this.getOwnerTree().animate && anim !== false) || anim){
this.ui.animExpand(function(){
this.fireEvent("expand", this);
if(typeof callback == "function"){
callback(this);
}
if(deep === true){
this.expandChildNodes(true);
}
}.createDelegate(this));
return;
}else{
this.ui.expand();
this.fireEvent("expand", this);
if(typeof callback == "function"){
callback(this);
}
}
}else{
if(typeof callback == "function"){
callback(this);
}
}
if(deep === true){
this.expandChildNodes(true);
}
},


Jack's initial suggest was to update it to:



expand : function(deep, anim, callback){
if(!this.expanded){
if(this.fireEvent("beforeexpand", this, deep, anim) === false){
return;
}
if(!this.hasChildNodes()){ // <--- new conditional
if(typeof callback == 'function'){ // <--- new
callback(this); // <--- new
} // <--- new
return; // <--- new
} // <--- new
if(!this.childrenRendered){
this.renderChildren();
}
this.expanded = true;
if((this.getOwnerTree().animate && anim !== false) || anim){
this.ui.animExpand(function(){
this.fireEvent("expand", this);
if(typeof callback == "function"){
callback(this);
}
if(deep === true){
this.expandChildNodes(true);
}
}.createDelegate(this));
return;
}else{
this.ui.expand();
this.fireEvent("expand", this);
if(typeof callback == "function"){
callback(this);
}
}
}else{
if(typeof callback == "function"){
callback(this);
}
}
if(deep === true){
this.expandChildNodes(true);
}
},