PDA

View Full Version : Make a node in a Ext.tree.TreePanel permanently expanded and non-collapsible?



jeff303
10 Jun 2011, 7:26 AM
Hi,

Is it possible to set up a tree node such that it is permanently expanded (after the initial load of tree data), and cannot be collapsed? In other words, the arrow is not shown and it's not possible to collapse the node.

I'm thinking you can do something like making the <img> with the "x-tree-ec-icon x-tree-elbow-end-minus" classes invisible or zero side, via CSS for example, but that seems hackish. Is there a way to accomplish this purely through ExtJS configuration? Many thanks.

Apologies if this has already been asked/answered; a forum search revealed many somewhat similar threads but none asking exactly how to do this.

skirtle
10 Jun 2011, 10:13 PM
I don't think there's a config option for this. I wouldn't call using CSS 'hackish', it's at the heart of doing things 'the ExtJS way'... it's just a little more work than a config option.

If you create a node using a config a bit like this (note that collapsible is not a 'real' config option but it's used further down):


{text: 'Node', nodeType: 'node', expanded: true, cls: 'uncollapsible', collapsible: false}

Then you can style the node using the uncollapsible CSS class:


.uncollapsible .x-tree-elbow-minus {
background-image: url(resources/images/default/tree/elbow.gif);
}

.uncollapsible .x-tree-elbow-end-minus {
background-image: url(resources/images/default/tree/elbow-end.gif)
}

In my example I've used the dotted-line elbows. This also seems to work if you're using useArrows: true but that's more by coincidence than design: it'd probably be better to explicitly set background-image: none in that case.

Then add this listener to the treepanel to stop the node being collapsible (note that double-clicking on a node's row will also collapse/expand the node, not just clicking on the arrow/plus/minus):


listeners: {
beforecollapsenode: function(node) {
return node.attributes.collapsible;
}
}

All of this simplifies down a bit if you want to make all nodes uncollapsible. In that case you could put the CSS class on the treepanel rather than each node and you wouldn't need the collapsible attribute.

jeff303
14 Jun 2011, 5:46 AM
skirtle, I think I love you.

Seriously though, thanks. Works brilliantly!