HOW TO REMOVE BLANK SPACE OF HIDDEN ARROW ROOT ICON IN TREE PANEL???

[DaRkViDe]

Hi, i want to hide the blank space on left of te root icon of treepanel!
When there are no items or subfolders in a node, the arrow icon disappear and leave a blank space.
In firebug i see that this div have a css class named "x-tree3-node-joint" and i cannot find it in the css of application to modify o resize it! I found it only in a css that is generated at runtime...
I found this method:
tree.getStyle().setJointExpandedIcon(jointExpandedIcon)

is there a method or a way to do like:

tree.getStyle().getJointExpandedIcon().HIDE()

or similar??

Any idea?? Tnx

Image below...
tree.png

[mario7165]

I have the same problem, any one?

[mario7165]

I don't know if this is correct but I solved in this way:

I have extended the TreePanelView so I override the getTemplate metod with the same code of the TreePanelView but I change the hard code
sb.append(jointElement == null ? "<img src=\"" + GXT.BLANK_IMAGE_URL
+ "\" style=\"width: 16px\" class=\"x-tree3-node-joint\" />" : DOM.toString(jointElement));

with

sb.append(jointElement == null ? "<img src=\"" + GXT.BLANK_IMAGE_URL
+ "\" style=\"width: 2px\" class=\"x-tree3-node-joint\" />" : DOM.toString(jointElement));


now when I create treePanel

tree.setView(new TreePanelView2());



this is the solution

import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.core.El;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanel.Joint;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanelView;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.AbstractImagePrototype;

public class TreePanelView2 extends TreePanelView {

@Override
public String getTemplate(ModelData m, String id, String text, AbstractImagePrototype icon, boolean checkable,
boolean checked, Joint joint, int level, TreeViewRenderMode renderMode) {
if (renderMode == TreeViewRenderMode.CONTAINER) {
return "<div unselectable=on class=\"x-tree3-node-ct\" role=\"group\"></div>";
}
StringBuilder sb = new StringBuilder();
if (renderMode == TreeViewRenderMode.ALL || renderMode == TreeViewRenderMode.MAIN) {
sb.append("<div unselectable=on id=\"");
sb.append(id);
sb.append("\"");

sb.append(" class=\"x-tree3-node\" role=\"presentation\">");

String cls = "x-tree3-el";
if (GXT.isHighContrastMode) {
switch (joint) {
case COLLAPSED:
cls += " x-tree3-node-joint-collapse";
break;
case EXPANDED:
cls += " x-tree3-node-joint-expand";
break;
}
}

sb.append("<div unselectable=on class=\"" + cls + "\" id=\"" + tree.getId() + "__" + id + "\" role=\"treeitem\" ");
sb.append(" aria-level=\"" + (level + 1) + "\">");
}
if (renderMode == TreeViewRenderMode.ALL || renderMode == TreeViewRenderMode.BODY) {
Element jointElement = null;
switch (joint) {
case COLLAPSED:
jointElement = (Element) tree.getStyle().getJointCollapsedIcon().createElement().cast();
break;
case EXPANDED:
jointElement = (Element) tree.getStyle().getJointExpandedIcon().createElement().cast();
break;
}

if (jointElement != null) {
El.fly(jointElement).addStyleName("x-tree3-node-joint");
}

sb.append("<img src=\"");
sb.append(GXT.BLANK_IMAGE_URL);
sb.append("\" style=\"height: 18px; width: ");
sb.append(level * 18);
sb.append("px;\" />");
sb.append(jointElement == null ? "<img src=\"" + GXT.BLANK_IMAGE_URL
+ "\" style=\"width: 2px\" class=\"x-tree3-node-joint\" />" : DOM.toString(jointElement));
if (checkable) {
Element e = (Element) (checked ? GXT.IMAGES.checked().createElement().cast()
: GXT.IMAGES.unchecked().createElement().cast());
El.fly(e).addStyleName("x-tree3-node-check");
sb.append(DOM.toString(e));
} else {
sb.append("<span class=\"x-tree3-node-check\"></span>");
}
if (icon != null) {
Element e = icon.createElement().cast();
El.fly(e).addStyleName("x-tree3-node-icon");
sb.append(DOM.toString(e));
} else {
sb.append("<span class=\"x-tree3-node-icon\"></span>");
}
sb.append("<span unselectable=on class=\"x-tree3-node-text\">");
sb.append(text);
sb.append("</span>");
}

if (renderMode == TreeViewRenderMode.ALL || renderMode == TreeViewRenderMode.MAIN) {
sb.append("</div>");
sb.append("</div>");
}
return sb.toString();
}

}

[programmatic]

I'm attempting to do something similar with the getTemplate() method however I'd like to remove the entire arrow. I'm overriding the method in my MyTreePanelView however it's still rendering the arrow...

public String getTemplate(ModelData m, String id, String text, AbstractImagePrototype icon, boolean checkable,
		      boolean checked, Joint joint, int level, TreeViewRenderMode renderMode) {
		    if (renderMode == TreeViewRenderMode.CONTAINER) {
		      return "<div unselectable=on class=\"x-tree3-node-ct\" role=\"group\"></div>";
		    }
		    StringBuilder sb = new StringBuilder();
		    if (renderMode == TreeViewRenderMode.ALL || renderMode == TreeViewRenderMode.MAIN) {
		      sb.append("<div unselectable=on id=\"");
		      sb.append(id);
		      sb.append("\"");

		      sb.append(" class=\"x-tree3-node\"  role=\"presentation\">");

		      String cls = "x-tree3-el";
		      if (GXT.isHighContrastMode) {
		        switch (joint) {
		          case COLLAPSED:
		            cls += " x-tree3-node-joint-collapse";
		            break;
		          case EXPANDED:
		            cls += " x-tree3-node-joint-expand";
		            break;
		        }
		      }

		      sb.append("<div unselectable=on class=\"" + cls + "\" id=\"" + tree.getId() + "__" + id + "\" role=\"treeitem\" ");
		      sb.append(" aria-level=\"" + (level + 1) + "\">");
		    }
		    if (renderMode == TreeViewRenderMode.ALL || renderMode == TreeViewRenderMode.BODY) {
		    /*  Element jointElement = null;
		      switch (joint) {
		        case COLLAPSED:
		          jointElement = (Element) tree.getStyle().getJointCollapsedIcon().createElement().cast();
		          break;
		        case EXPANDED:
		          jointElement = (Element) tree.getStyle().getJointExpandedIcon().createElement().cast();
		          break;
		      }

		      if (jointElement != null) {
		    //    El.fly(jointElement).addStyleName("x-tree3-node-joint");
		      }*/

		      sb.append("<img src=\"");
		      sb.append(GXT.BLANK_IMAGE_URL);
		      sb.append("\" style=\"height: 18px; width: ");
		      sb.append(level * 18);
		      sb.append("px;\" />");
		      sb.append("<img src=\"" + GXT.BLANK_IMAGE_URL
		          + "\" style=\"width: 2px\" class=\"x-tree3-node-joint\" />");
		      if (checkable) {
		        Element e = (Element) (checked ? GXT.IMAGES.checked().createElement().cast()
		            : GXT.IMAGES.unchecked().createElement().cast());
		        El.fly(e).addStyleName("x-tree3-node-check");
		        sb.append(DOM.toString(e));
		      } else {
		        sb.append("<span class=\"x-tree3-node-check\"></span>");
		      }
		      if (icon != null) {
		        Element e = icon.createElement().cast();
		        El.fly(e).addStyleName("x-tree3-node-icon");
		        sb.append(DOM.toString(e));
		      } else {
		        sb.append("<span class=\"x-tree3-node-icon\"></span>");
		      }
		      sb.append("<span  unselectable=on class=\"x-tree3-node-text\">");
		      sb.append(text);
		      sb.append("</span>");
		    }

		    if (renderMode == TreeViewRenderMode.ALL || renderMode == TreeViewRenderMode.MAIN) {
		      sb.append("</div>");
		      sb.append("</div>");
		    }
		    return sb.toString();
		  }

Any suggestions? I want to make a tree structure but I don't want expandable nodes and I dont want the arrow image.

[hurple]

Holy moses, this has been bugging me for a week. Thank you.