Results 1 to 9 of 9

Thread: Is it possible to hide the expand icon in a TreePanel

  1. #1

    Default Is it possible to hide the expand icon in a TreePanel

    Hi I have a following structure in a TreePanel
    Code:
    Root
      Node 1
      Node 2
    Since there are no child for Node 1 & 2 and I'm hiding the Root node, the TreePanel displays as follow
    Code:
      Node 1
      Node 2
    Is there anyway I can remove the empty expand icon so they'll be displayed as the following?
    Code:
    Node 1
    Node 2
    Regards,

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253

    Default

    Set leaf: true on the node.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3

    Default

    Code:
    var root = new Ext.tree.TreeNode({
        id: "root",
        expanded: true
    });
    root.appendChild(new Ext.tree.TreeNode({
        id: "N1",
        text: "Node 1",
        leaf: true
    }));
    root.appendChild(new Ext.tree.TreeNode({
        id: "N2",
        text: "Node 2",
        leaf: true
    }));
    var TreeLists = new Ext.tree.TreePanel({
            rootVisible: false,
            border: false,
            trackMouseOver: false,
            lines: false,
            root: root
    });
    Doesn't seem to work, although they are leaf nodes, the invisible expanded icon still seems to be there.

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253

    Default

    No, that space is reserved to show the indent, it's a tree after all.

    Did you just want a flat list that looks like a tree?

    In that case, hide the root node.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5

    Default

    Yes, that's exactly what I want, I thought setting rootVisible: false would do the trick but clearly I'm missing something here...Please enlighten me =)

  6. #6
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253

    Default

    Ah, I see. It still reserves space for it.

    There's no way to turn that off without modifying the code. You'd probably have to look in TreeNodeUI.js
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #7
    Ext User
    Join Date
    Mar 2008
    Posts
    6

    Default

    PHP Code:

    ...
    var 
    MyTreeNodeUI Ext.extend(Ext.tree.TreeNodeUI,  {
        
    updateExpandIcon:function(){
            
    MyTreeNodeUI.superclass.updateExpandIcon.call();
            
    //hide icon
            
    this.ecNode.style.display 'none';
            
    this.iconNode.style.display 'none';
        }
    });
    ...
    var 
    itemTree = new Ext.tree.TreePanel({
        ...
        
    loader: new Ext.tree.TreeLoader({baseAttrs: {
            
    uiProviderMyTreeNodeUI
        
    }}),
        
    root: new Ext.tree.AsyncTreeNode({...}),
        ...
    }) 

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Wouldn't you just have to make a CSS rule for ".x-tree-node-icon" in that TreePanel to be display: none?

    But then you are not really displaying a Tree. Just a series of <a> elements.

  9. #9

    Default Extjs6

    For ExtJS 6, for example, when read config is false, hide the node:


    Code:
        hideItemsReadFalse: function () {
            var me = this,
                items = me.getReferences().treelistRef.itemMap;
        
        
            for(var i in items){
                if(items[i].config.node.data.read == false){
                    items[i].destroy();
                }
            }
        }


    Root:




    Code:
     {
            "text": "root",
            "children": [
                {
                    "text": "Atualizao",
                    "iconCls": "x-fa fa-list",
                    "children": [
                        {
                            "leaf":true,
                            "text": "Empresas",
                            "module": "empresas",
                            "iconCls": "x-fa fa-building",
                            "read": false
                        },
                        {
                            "leaf":true,
                            "text": "Produtos",
                            "module": "produtos",
                            "iconCls": "x-fa fa-cubes",
                            "read": true
                        }
                    ]
                }
            ]
        }
    Thanks
    Albanir Neves

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •