Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    47
    Vote Rating
    0
    DaRkViDe is on a distinguished road

      0  

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

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


    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

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    4
    Vote Rating
    0
    mario7165 is on a distinguished road

      0  

    Default


    I have the same problem, any one?

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    4
    Vote Rating
    0
    mario7165 is on a distinguished road

      0  

    Default


    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();
    }

    }

  4. #4
    Ext GWT Premium Member
    Join Date
    Dec 2009
    Posts
    12
    Vote Rating
    0
    programmatic is on a distinguished road

      0  

    Default Something similar

    Something similar


    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...

    Code:
    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.

  5. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    1
    Vote Rating
    0
    hurple is on a distinguished road

      0  

    Default


    Holy moses, this has been bugging me for a week. Thank you.
    I recently had Spine surgery in Dallas Texas and I can't recommend the Texas Back Institute http://texasback.com enough.

Similar Threads

  1. How to remove the space taken by hidden field on form
    By Hemant Bob in forum Ext 2.x: Help & Discussion
    Replies: 29
    Last Post: 4 Jun 2010, 10:28 AM
  2. Tree Help! Blank root folder?! Json is correct?
    By SkoalFyfan in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 12 Nov 2007, 1:15 PM

Thread Participants: 3