Extjs TreePanel: How to hide nodes by class or attribute?
I have a tree with nodes containing tasks.
Completed tasks have attribute status: 100 and class cls: "done".
I would like to make a button to hide completed tasks.
What function will hide the nodes in the tree by their id or class?
{"id":"45",
"description":"Pay bills",
"status":"100",
"cls":"done",
"uiProvider":"col",
"leaf":true}
Try going through the tree starting at the root and testing the attributes you want. If you get 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 really asked about class testing "done"
. In this case, just check if instead of this.attributes['cls'] == 'done'
. I prefer to check "status"
than "cls"
as the latter can be spatially partitioned and messy.
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
}
]
}
]
}