PDA

View Full Version : [2.x] TreePanel Indenting



Green
20 Feb 2008, 3:18 AM
If you use custom TreeNodeUIs like I, then could run into issues regarding indenting in nodes differing between IE6 and 7. I found a simple solution though if your UI does not use tree lines.
Override the following in your CustomTreeNodeUI:

getChildIndent : function(){
if(!this.childIndent){
var buf = [];
var p = this.node;
while(p&&!p.ui.hidden){
if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){
buf.unshift('<span class="x-tree-indent-item"></span>');
}
p = p.parentNode;
}
this.childIndent = buf.join("");
}
return this.childIndent;
}

with in your custom CSS:

.x-tree-indent-item {
padding-right:16px;
}

Benefits:
* FASTER - As multiple 1x1 images are no longer used to indent sub-nodes.
* PORTABILITY - Works the same in all versions of FF and IE.
* COMPACT - Generates a few bytes less HTML per indent than the default IMG tags.

Enjoy!