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}
source to share
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.
source to share
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
}
]
}
]
}
source to share