View Full Version : treePanel Plugin: Ext.ux.tree.TreePanel.AllowExpandEmptyBranch

3 Sep 2009, 5:49 PM
Hi All

I recently ran into a problem where any empty group I had added to a tree could not be expanded. If you clicked the expand (+ button) it would just show the loading icon indefinitely and other nodes could not be dragged into the branch in order to add children to it. Changing the config property: expandable, didn't seem to have any effect (in fact it wasn't even getting applied to the node).

What I am posting here is most likely not the best solution but it solves the problem well enough for what I am currently trying to accomplish.

This plug in will watch for when an empty branch node that is about to be loaded and will add in a single hidden node to its attributes.children property. This allows the node to behave as if it were a normal branch node.

Note: Another solution was offered to me for this problem by condor (see thread: http://www.extjs.com/forum/showthread.php?p=382836#post382836)-- (http://www.extjs.com/forum/showthread.php?p=382836#post382836%29--) it seems if you create a node with a nodeType of 'node' or a property of {loaded : true} you can create a branch node that will not be expandable until children have been added to it. However I found some problems with this -- for one the branch node will only have a leaf icon instead of a branch icon (not a big deal since this can be fixed by changing the cls or icon of the node) and if you add just one child to the node and then try to expand it some problem in extjs will cause the node to auto collapse again (not a problem with 2 children added to the node though).

Best Regards

Will Ferrer

author: Will Ferrer
date: 09/03/09
09/03/09 -- posted to ExtJS forums
* @class Ext.ux.tree.TreePanel.AllowExpandEmptyBranch
* @extends Ext.util.Observable
* A quick and dirty plugin that solves the problem where expanding an empty branch node causes it show it's loading icon indefenately.
* This plug in checks when a node is about to be loaded, and if it is a branch node that has no children it adds 1 hidden child node to it. This will allow the branch node to behave as it should.
* @constructor
* @param {Object} config The config object
* @ptype ux-tree-treepanel-allowexpandemptybranch
Ext.ux.tree.TreePanel.AllowExpandEmptyBranch = function(config){
Ext.apply(this, config);
Ext.extend(Ext.ux.tree.TreePanel.AllowExpandEmptyBranch, Ext.util.Observable, {
//Public Properties:
* @cfg {Boolean} enabled
* Whether or not plugin features are enabled. Defaults to true.
enabled : true,
* @cfg {Boolean} affectRoot
* Whether or not the root node should be affected. Defaults to false.
affectRoot : false,
* @cfg {Boolean} clearTempNodesOnExpand
* (Causes a bug where node with only 1 child added to it auto collapses when expanded -- it also occurs when creating a branch node with a nodeType of 'node' or a loaded value of true) Whether or not to clear the temp nodes created on load when a node is expanded -- if this left as true when a branch that only has a temp node in it is expanded its + button will be removed. Defaults to false.
clearTempNodesOnExpand : false,
//Private Functions:
init: function(parent){
this.parent = parent;
this.parent.on('beforeload', this.onBeforeLoad, this);
this.parent.on('expandnode', this.onExpandNode, this);
onBeforeLoad: function(node){
if (this.enabled) {
var hasAttributeChildren = (!node.attributes.leaf && typeof(node.attributes.children)!='undefined' && node.attributes.children.length),
hasChildNodes = !node.isLeaf && !node.childNodes.length;
if ((!node.isRoot || this.affectRoot) && !hasAttributeChildren && !hasChildNodes) {
node.attributes.children = [{
onExpandNode: function(node){
var n, curNode, childNodes = node.childNodes;
if (this.enabled) {
if (this.clearTempNodesOnExpand) {
for (n=0;n<childNodes.length;n++) {
curNode = childNodes[n];
if (curNode.attributes.tempNode) {
Ext.preg('ux-tree-treepanel-allowexpandemptybranch', Ext.ux.tree.TreePanel.AllowExpandEmptyBranch);