PDA

View Full Version : Is it possible to hide the expand icon in a TreePanel



bluefox
10 Sep 2008, 2:10 PM
Hi I have a following structure in a TreePanel


Root
Node 1
Node 2
Since there are no child for Node 1 & 2 and I'm hiding the Root node, the TreePanel displays as follow


Node 1
Node 2
Is there anyway I can remove the empty expand icon so they'll be displayed as the following?


Node 1
Node 2
Regards,

evant
10 Sep 2008, 5:01 PM
Set leaf: true on the node.

bluefox
10 Sep 2008, 5:16 PM
var root = new Ext.tree.TreeNode({
id: "root",
expanded: true
});
root.appendChild(new Ext.tree.TreeNode({
id: "N1",
text: "Node 1",
leaf: true
}));
root.appendChild(new Ext.tree.TreeNode({
id: "N2",
text: "Node 2",
leaf: true
}));
var TreeLists = new Ext.tree.TreePanel({
rootVisible: false,
border: false,
trackMouseOver: false,
lines: false,
root: root
});
Doesn't seem to work, although they are leaf nodes, the invisible expanded icon still seems to be there.

evant
10 Sep 2008, 5:17 PM
No, that space is reserved to show the indent, it's a tree after all.

Did you just want a flat list that looks like a tree?

In that case, hide the root node.

bluefox
10 Sep 2008, 6:20 PM
Yes, that's exactly what I want, I thought setting rootVisible: false would do the trick but clearly I'm missing something here...Please enlighten me =)

evant
10 Sep 2008, 6:40 PM
Ah, I see. It still reserves space for it.

There's no way to turn that off without modifying the code. You'd probably have to look in TreeNodeUI.js

ygl
9 Nov 2009, 10:47 PM
...
var MyTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
updateExpandIcon:function(){
MyTreeNodeUI.superclass.updateExpandIcon.call();
//hide icon
this.ecNode.style.display = 'none';
this.iconNode.style.display = 'none';
}
});
...
var itemTree = new Ext.tree.TreePanel({
...
loader: new Ext.tree.TreeLoader({baseAttrs: {
uiProvider: MyTreeNodeUI
}}),
root: new Ext.tree.AsyncTreeNode({...}),
...
})

Animal
10 Nov 2009, 5:41 AM
Wouldn't you just have to make a CSS rule for ".x-tree-node-icon" in that TreePanel to be display: none?

But then you are not really displaying a Tree. Just a series of <a> elements.

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