Java tips and tricks from a lady trying to play with the boys...

Friday, August 12, 2011

Proper Indentation on a Tree In ExtJS

I'm using ExtJS's tree functionality to display navigation on a website (and then skinning over it so that it doesn't look like a bunch of folders).  However, a major problem that I was having was that ExtJS absolutely does not allow multiple lines in its tree implementation.  You can update the stylesheet to allow for wrapping with the following entry in your CSS:

.x-tree-node-anchor {
	white-space: normal;	
}

However, this will cause your multiple lines to wrap without the proper indentation.  I struggled with this for many hours before finding an excellent extension that wraps properly.  You can find it here:

IndentedTreeNodeUI

Mad props to JJulian for putting this together!  Hopefully, my links to his page will make this UI easier to find.