Results 1 to 4 of 4

Thread: How to hide a node in tree panel

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    India
    Posts
    16

    Default How to hide a node in tree panel

    Hello,

    Following is my code for tree panel:
    var treeP = new Ext.create('Ext.tree.Panel', {
    margin: marginInMenuContent,
    resizable: true,
    tbar: [
    {
    xtype: 'button', id: 'edit_host', text: MyApp.Host.editbtn, margin: '0 0 0 0', width: 130, height: 34, iconCls: 'edit-icon',
    handler: function () {
    var index = Ext.util.Cookies.get('index');
    if (index == 2 || index == 1 || index == 0) {
    changeURL('EditHostNetwork');
    }
    if (index == 3) {
    changeURL('EditHostThreeG');
    }
    if (index == 4 || index == 5) {
    changeURL('EditCompanionNetwork');
    }
    if (index == 6) {
    changeURL('EditCompanionTimeServerConfig');
    }
    }
    }],
    root: {
    text: MyApp.HostMenu.confighost,
    id: "navTree",
    expanded: true,
    cls: 'spacing',
    children: [
    { text: MyApp.HostMenu.hostsetting, id: "host_setting", expanded: true, cls: 'spacing',
    children: [ { text: MyApp.HostMenu.network, id: "host_network", leaf: true, cls: 'spacing' },
    { text: MyApp.HostMenu.threeg, id: "host_threeg",itemId:'host_threeg', leaf: true, cls: 'spacing' } ]
    },
    { text: MyApp.HostMenu.companionsetting,
    id: "sys_status",
    expanded: true,
    cls: 'spacing',
    children: [{ text: MyApp.HostMenu.network, id: "companion_network", leaf: true, cls: 'spacing' }]
    },
    { text: MyApp.HostMenu.timeserver,
    id: "sys1_status",
    cls: 'spacing',
    leaf: true
    }
    ]
    },
    bodyCls: 'header',
    height: 100,
    listeners: {
    itemclick: function (view, rec, item, index, eventObj) {
    if (index == 2 || index == 1 || index == 0) {
    changeURL('HostNetwork');
    }
    if (index == 3) {
    changeURL('HostThreeG');
    }
    if (index == 4 || index == 5) {
    changeURL('CompanionNetwork');
    }
    if (index == 6) {
    changeURL('CompanionTimeServerConfig');
    }
    }
    }
    });

    I want to hide a node whose id is 'host_threeg'. I tried to use getNodeById() method as
    treeP.getNodeById('host_threeg'). However, it is giving an error as getNodeById() is not defined.

    Please help me and let me know what is wrong with this code.

    Thank you,
    Trupti

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,751
    Answers
    130

    Default

    you could do this with CSS, however i recommend to do that business logic on the treestore itself. example: you could use filterBy() and exclude the hidden elements with your own logic.
    Best regards
    Tobias Uhlig

  3. #3
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Answers
    44

  4. #4

    Default

    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
  •