PDA

View Full Version : How to hide a node in tree panel



trupti.patil
11 Jun 2012, 9:03 PM
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

tobiu
12 Jun 2012, 12:41 AM
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.

redraid
12 Jun 2012, 12:47 AM
Look this thread - http://www.sencha.com/forum/showthread.php?142704-Show-Hide-of-the-tree-node-in-ExtJS-4

albanirneves
28 Mar 2016, 8:07 AM
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
}
]
}
]
}