CODEWITHSUNDEEP
javascriptextjs
Alex L
Alex L

Reputation: 8449

Extjs TreePanel: How can I hide nodes by class or attribute?

I have a tree with nodes that contain tasks.

Completed tasks have attribute status: 100 and class cls: "done".

I would like to make a button for hiding completed tasks.

What function will hide nodes in a tree by their id or class?

{"id":"45",
"description":"Pay bills",
"status":"100",
"cls":"done",
"uiProvider":"col",
"leaf":true}

Upvotes: 2

Views: 6682

Answers (2)

Albanir Neves
Albanir Neves

Reputation: 183

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

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: 

{
    "text": "root",
    "children": [
        {
            "text": "Atualização",
            "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
                }
            ]
        }
    ]
}

Upvotes: 1

Roatin Marth
Roatin Marth

Reputation: 24095

Try walking the tree starting at the root and testing for the attribute(s) you want. If you get a hit, hide the node:

tree.getRootNode().cascade(function() { // descends into child nodes
    if(this.attributes['status'] == 100) { // test this node
        this.getUI().hide() // hide this node
    }
})

You actually asked about testing by the class "done". In that case just test if this.attributes['cls'] == 'done' instead. I prefer checking "status" than "cls" as the latter can be space-separated and messy.

Upvotes: 8

Related Questions