View Full Version : Ext.ux.tree.MultilineTreeNodeUI

24 Mar 2009, 2:25 PM
Hey all!

Today I looked for a way to handle multiple lines in a TreeNode. There are some threads to this problem but I could not find any solution. So i decided to extend the TreeNodeUI class. Here is my MultilineTreeNodeUI. (my first user extension...). Maybe you try it and give me some feedback.


Now released in the ux-repository:

Watch the demo (http://extjs-ux.org/repo/authors/JosephFrancis/trunk/Ext/ux/tree/examples/multiline-tree-nodes.html)!


26/03/09 - Fixed problems using "lines : false" and "useArrows : true"
26/03/09 - Manage empty uiProvider without details

25 Mar 2009, 4:49 PM
Thanks for the contribution.

Let me see if I have the usage right ....

Implement these styles on your page:

.x-tree-multiline-node-expanded .x-tree-elbow-line-multiline-expanded {
background-image: url(/<YOUR EXT AREA>/resources/images/default/tree/elbow-line.gif);

.x-tree-multiline-node-collapsed .x-tree-elbow-line-multiline-expanded {
background-image: none;

.x-tree-multiline-node-details {
ANY: 'property you want to set for the look of your control';

Where x-tree-multiline-node-details is the class that controls how the extra lines will look.

In your code:
If you want to include more lines in a node then you provide ...
1) details: an array of strings to add
2) uiProvider: Ext.ux.tree.MultilineTreeNodeUI


... in your node ...
details : ['Some more text...','And more text...'],
uiProvider: Ext.ux.tree.MultilineTreeNodeUI,
... in your node continued ...

Did I miss anything about the implementation / usage of your control that is important?

One suggestion
There may be times when a particular node will have no details. In this case leaving out the uiProvider works fine - but if it is left in the control fails to expand, showing a "attributes.details.length is null..." message.

With a minor update your control could handle having the uiProvider added but no details provided (without failing).

Adding the below "if" around the for loop did it in a copy of your control.

if (n.attributes.details) {
//--- then your loop
for (var x = 0; x < n.attributes.details.length; x++) {

A bug in using lines = false
When you specify lines: false in the config of the TreePanel - the line on the first entry of each section still shows. I was able to get rid of the bug by updating as follows (may be a better way - this is just how I got it to look right)

This code ....

//... code
var href = a.href ? a.href : Ext.isGecko ? "" : "#";
var buf =
['<li class="x-tree-node x-tree-multiline-node-expanded"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
//... code

Was updated to this ...

//... code
var href = a.href ? a.href : Ext.isGecko ? "" : "#";
//... updated the next line - checks this.node.ownerTree.lines to determine the class to use
var buf =
['<li class="x-tree-node ' + ((this.node.ownerTree.lines == false) ? 'x-tree-multiline-node-collapsed' : 'x-tree-multiline-node-expanded') + '"><div ext:tree-node-id="', n.id, '" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls, '" unselectable="on">',
//... code

Here is that area of the code updated with both of the above suggestions included:

var buf =
['<li class="x-tree-node ' + ((this.node.ownerTree.lines == false) ? 'x-tree-multiline-node-collapsed' : 'x-tree-multiline-node-expanded') + '"><div ext:tree-node-id="', n.id, '" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls, '" unselectable="on">',
'<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
'<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " " + a.iconCls : ""), '" unselectable="on" />',
cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
'<a hidefocus="on" class="x-tree-node-anchor" href="', href, '" tabIndex="1" ',
a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "", '><span unselectable="on">', n.text, "</span></a>"].join('');

if (n.attributes.details) {
for (var x = 0; x < n.attributes.details.length; x++) {

buf += ["<br/>",
'<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
(!n.nextSibling && n.hasChildNodes()) ? '<span style="margin-left: 16px;"></span>' : '',
n.nextSibling ? '<img src="' + this.emptyIcon + '" class="x-tree-ec-icon x-tree-elbow-line" />' : '',
(n.hasChildNodes()) ? '<img src="' + this.emptyIcon + '" class="x-tree-ec-icon x-tree-elbow-line-multiline-expanded" style="margin-right: 2px;"/>' : '<span style="margin-left: 16px;"></span>',
(n.isLast() && !n.isExpandable()) ? '<span style="margin-left: 16px;"></span>' : '',
'<span class="x-tree-multiline-node-details">' + n.attributes.details[x] + '</span>'].join('');


Thanks for multi-line tree control!

26 Mar 2009, 1:52 AM
Thank you joe for your detailed report. I've just updated the component the way you suggested. I noticed that i never tried the uiProvider without using tree-lines :D

But i think we should check for the useArrows-Property too:

'<li class="x-tree-node ' + ((this.node.ownerTree.lines == false || this.node.ownerTree.useArrows) ? 'x-tree-multiline-node-collapsed' : 'x-tree-multiline-node-expanded') + '">',

Your description how to implement the uiProvider was correct.

26 Mar 2009, 5:58 AM

Are you interested in publish this (or having it published) in the ux repository?

I just did the setup to become an author in that area (not too though but can take some time / reading / setup).

I see quite a few where the Author is one person and the publisher is another, so I could publish this with you as Author if you want.

Here is a link to the ux thread:

Here are some links to a doc'd up version of the class and a few examples:


Class moved to seperate .js file and doc'd up with Author/License/Etc. :

I can publish this and update as desired or the above files should be a nice starter for publishing your first. Note: If you want me to publish and want your author name to be your actual name intead of just your username - just send me that and I'll update before I post.

26 Mar 2009, 9:12 AM
Hi Joe!

Thanks for the offer. I wrote you a private message with details.

26 Mar 2009, 10:13 AM
Per your PM - I updated the name, uploaded the new control and registered it. It is now live.


You will find your control published in the Ext.ux.tree area

Direct Link: http://extjs-ux.org/docs/?class=Ext.ux.tree.MultilineTreeNodeUI


22 Jul 2009, 12:25 AM
If I put a long text in details field, a horizontal scroll bar appears to scroll and see the complete text. I could make out that its because overflow css property is set to auto.
Instead of a horizontal scroll bar, I would like the text to wrap and show the complete text in a fixed width node component. Please help me on how to get this done.


29 Oct 2010, 7:42 AM
How can I change the details dynamically?

node.attributes.details.push or some other way?

I could not get it to work for a feature which requires the second row to change based on the changes made in another related view