Tree/TreeViewer Icons/Lines

[ccocco]

I'm using the AsyncTreeViewer example to create a tree widget that fetches child nodes and the parent nodes are expanded. Is it possible to make the plus and minus expansion handles and the dotted expansion lines appear, rather than just the arrow expansion handles with no expansion lines? I can't seem to determine how to do this programmatically or via the CSS. Thanks!

[darrellmeyer]

This is not supported and would not be easy to implement as the HTML markup was not designed to show the lines.

[gerardr]

Darrell,

This is going to be a show-stopper for me. I'm replacing a desktop app with a web-based implementation, and it needs to look like the original app as much as possible. Minor differences are ok, but the current tree implementation is harder to use and quite frankly ugly (my users' words). Plus-minus handles and dotted expansion lines are available in every commercial AJAX toolkit out there, including your own ExtJS. If you have to change the markup, so be it.

[ccocco]

Is it possible to at least change the Tree expand/collapse icons to plus and minus via CSS? If so, which attributes correspond to them? Thanks!

[darrellmeyer]

Is it possible to at least change the Tree expand/collapse icons to plus and minus via CSS? If so, which attributes correspond to them? Thanks!Yes, this is possible. Here are the styles you will need to override. Just make sure you add your overrides after the loading ext-all.css. If you do not want mouse over effects use background:none.

.my-tree-close {
background: url(../images/gxt/tree/vnode.gif) no-repeat 0px 1px;
}

.my-tree-open {
background: url(../images/gxt/tree/vnode.gif) no-repeat 0px -32px;
}

.my-tree-joint-over .my-tree-open {
background: url(../images/gxt/tree/vnode.gif) no-repeat 0px -48px;
}

.my-tree-joint-over .my-tree-close {
background: url(../images/gxt/tree/vnode.gif) no-repeat 0px -15px;
}

[ccocco]

Great, thanks! Could you please tell me what the "joint-over" attribute is for? Thanks!

[darrellmeyer]

They are the mouse over styles for the joint.

[shearer]

Is there any way to replace the folder icon, in the Tree widget with a plus and minus gif's.

Which properties in the CSS do I have to replace?

Thank you

[shearer]

Is there any way to replace the folder icon, in the Tree widget with a plus and minus gif's.

Which properties in the CSS do I have to replace?

Thank you


I have another question related to the tree widget. I'm creating instances of a class which extends from BaseTreeModel. What kind of listener can I add in order to detect when a particular child item was clicked? I have a Menu into the application, and i want to change the view according to the selected option

[richarpw]

Did the ability to override these styles (tree joints with plus and minus) discontinue with 2.0, I see them in the 1.2.4 demo but not in the 2.0 demo?