Alpha2 TreePanel - Ext JS

#2 02-26-2007, 04: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.

#3 02-26-2007, 04: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!

#4 02-26-2007, 06: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

#5 02-27-2007, 04: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...

#6 02-27-2007, 07:15 AM

This error of the blankline under the expaned nodes also occurs using 0.4. (in IE7). Any idea how to fix this?

#7 02-27-2007, 10: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.

#8 02-27-2007, 01:41 PM

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

#9 02-28-2007, 11:21 AM

It should be fine. I added it to the tree css prefixed by .ext-ie

#10 02-28-2007, 01:08 PM

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);
        }
    },