Extendiendo un control TreePanel

    /**
     *  Allow: Dynamic enabling/disabling of drag and/or drop.
     *  Author: murrah
     *  Post: 21893 #4
     */
    Ext.ux.TreeDocs = function(config) {
        Ext.ux.TreeDocs.superclass.constructor.call(this, config);
    };

    /**
     *  Allow: Extend more the Tree. / Add Mask to TreePanel
     *  Author: HACKPRO TM / OutpostMM
     *  Post: - / 43645 #6
     */
    Ext.extend(Ext.ux.TreeDocs, Ext.tree.TreePanel, {
     maxNumber: 0,
     allowDrag: function(allow) {
            if (allow) {
                if ( (this.enableDD) || (this.enableDrag) ) {
                    this.dragZone = new Ext.tree.TreeDragZone(this, this.dragConfig || {
                        ddGroup: this.ddGroup || "TreeDD",
                        scroll: this.ddScroll
                    });

                }

            } else if (this.dragZone != undefined) {
             this.dragZone.unreg(); // Unregister the dragZone so Dragging is disabled.
            }

        },
        allowDrop: function(allow) {
            if (allow) {
                if ( (this.enableDD) || (this.enableDrop) ) {
                    this.dropZone = new Ext.tree.TreeDropZone(this, this.dropConfig || {
                        ddGroup: this.ddGroup || "TreeDD", 
                        appendOnly: this.ddAppendOnly === true
                    });

                }

            } else if (this.dropZone != undefined) {
                this.dropZone.unreg(); // Unregister the dropZone so Dropping is disabled.
            }

        },
        
        /**
         * Allow: Recursive Count Nodes write by HACKPRO TM based in the zesh code.
         * Author: zesh
         * Post: 1930 #3
         */
        recursiveCount: function(node) {
         if (node.hasChildNodes()) {
          var totalNodes = 0;
          
             // Recurse on all child nodes of the current node.
             for (var i = 0; i < node.childNodes.length; i++) {
              totalNodes += node.childNodes.length;
                 this.recursiveCount(node.childNodes[i]);
             }
             
            }
            
            return totalNodes;
            
        },
        
        recursiveMaxID: function(node) {
         if (node.hasChildNodes()) {
             // Recurse on all child nodes of the current node.
             for (var i = 0; i < node.childNodes.length; i++) {
              var nID = node.childNodes[i].id;
              
              if (nID) {
               nID = parseInt(nID.replace(/\D/g, ''), 10);
              } else {
               nID = -1;
              }
              
              if (nID > this.maxNumber) {
               this.maxNumber = nID;
              }
              
              this.recursiveMaxID(node.childNodes[i]);
             }
             
            }
            
            return this.maxNumber;
            
        },
        
        getMaxID: function() {
         var rootTree = this.getRootNode();
         this.recursiveMaxID(rootTree);
         
         return this.recursiveMaxID(rootTree);
        },
        
        getCountNodes: function() {
         var rootTree = this.getRootNode();
         var len = rootTree.childNodes.length + this.recursiveCount(rootTree) + 1;
         
         return len;
        },
        
        removeChildren: function(node) {
            while (node.firstChild) {
                var c = node.firstChild;
             node.removeChild(c);
             c.destroy();
         }
         
     },
     
     putRootNode: function(node, jsonData) {
      this.removeChildren(node);
      this.getRootNode().appendChild(jsonData);
     },
     
     /**
      * @cfg {Boolean} mask Indicates if the tree panel should have a loadmask applied when loading nodes
      */
     mask: false,
     maskObject: null,
     /**
      * @cfg {Object} maskConfig A configuration object that can be applied to the loadmask.
      */
     maskConfig: { msg: "Cargando..." },
 
     // init
     initComponent:function() {
         // call parent
         Ext.ux.TreeDocs.superclass.initComponent.apply(this, arguments);
 
         if (this.mask) { this.on('render', this.createMask, this); }
     }, // end initComponent
 
     /**
      * @private
      */
     createMask: function() {
      if (this.maskObject == null) {
       var mask = new Ext.LoadMask(this.getEl(), this.maskConfig);
      } else {
       var mask = new Ext.LoadMask(this.maskObject, this.maskConfig);
      }     
         
         this.getLoader().on('beforeload', mask.show, mask);
         this.getLoader().on('load', mask.hide, mask);
     }

    });

    Ext.reg("treedocs", Ext.ux.TreeDocs);

Prevent Loop No-Leaf Nodes in ExtJS TreeView

Using this overrider function you can stop the loading waiting loop in the TreeView.

    /**
     *  Allow: Stop loading No-Leaf Node.
     *  Author: HACKPRO TM
     *  Post: -
     */
    Ext.override(Ext.tree.TreeLoader, {
     load: function(A, B) {
      if (this.clearOnLoad) {
    while (A.firstChild) {
     A.removeChild(A.firstChild);
    }
    
   }
   
   if (this.doPreload(A)) {
    if (typeof B == "function") {
     B();
    }
    
   } else if (this.dataUrl || this.url) {
    this.requestData(A, B);
   } else if (typeof B == "function") {
    B();
   }
   
  }
  
    });
    
    Ext.override(Ext.tree.TreeNodeUI, {
     updateExpandIcon : function() {
         if (this.rendered) {
             var n = this.node, c1, c2;
             var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
             var hasChild = n.hasChildNodes();
             var cls1 = '';
             
             if (hasChild || n.attributes.expandable || n.attributes.isFolder) {
                 if (n.expanded) {
                     cls1 = "-minus";
                     c1 = "x-tree-node-collapsed";
                     c2 = "x-tree-node-expanded";
                 } else {
                     cls1 = "-plus";
                     c1 = "x-tree-node-expanded";
                     c2 = "x-tree-node-collapsed";
                 }
                 
                 if (this.wasLeaf) {
                     this.removeClass("x-tree-node-leaf");
                     this.wasLeaf = false;
                 }
                 
                 if (n.attributes.isFolder && n.attributes.leaf) {
                  cls1 = '';
                 }
                 
                 cls += cls1;
                 
                 if (this.c1 != c1 || this.c2 != c2) {
                     Ext.fly(this.elNode).replaceClass(c1, c2);
                     this.c1 = c1; this.c2 = c2;
                 }
                 
             } else {
                 if (!this.wasLeaf) {
                     Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
                     delete this.c1;
                     delete this.c2;
                     this.wasLeaf = true;
                 }
                 
             }
             
             var ecc = "x-tree-ec-icon " + cls;
             
             if (this.ecc != ecc) {
                 this.ecNode.className = ecc;
                 this.ecc = ecc;
             }
             
         }
         
     }
     
 });

TreeCombo (ExtJS)

Pequeña extensión para extender un Tree con un Combo.

/**
* @author Possible author is roytmana
* @version 1.0
* @class Ext.ux.TreeCombo
* @extends Ext.form.ComboBox
*+++++++++++++++++++++++++++++++++++++++
*          Edit by HACKPRO TM
*+++++++++++++++++++++++++++++++++++++++
*/

Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {

lastKeys : '',
admitLeaf: true,
treeTypeAhead: false,

initList : function() {
if (this.list != undefined) {
return;
}

if (this.editable !== false) {
this.el.on("keyup", this.onKeyUpTree, this)
}

if (this.treeTypeAhead) {
this.taTask = new Ext.util.DelayedTask(this.onTreeTypeAhead, this);
}

var tConf = {
floating : true,
listeners : {
click : this.onNodeClick,
scope : this
},

alignTo : function(el, pos) {
this.setPagePosition(this.el.getAlignToXY(el, pos));
},
keys : [{
key : 9,
fn : function() {
this.onNodeClick(this.list.getSelectionModel()
.getSelectedNode());
},
scope : this
}, {
key : 27,
fn : function() {
this.collapse();
this.focus(true, true);
},
scope : this
}]

};

if (this.treeConfig) {
Ext.applyIf(tConf, this.treeConfig);
if (this.treeConfig.listeners) {
Ext.applyIf(tConf.listeners, this.treeConfig.listeners);
}

if (tConf.loader) {
tConf.loader.on("load", this.onTreeLoad, this);
}

}

this.list = new Ext.tree.TreePanel(tConf);

if (!this.list.rendered) {
var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
this.list.render(document.body);
this.list.setWidth(lw);
this.list.alignTo(this.wrap, this.listAlign);
this.innerList = this.list.body;
this.innerList.setWidth(lw);
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
this.list.hide();
}

},

doQuery : function(q, forceAll) {
this.expand();
},

collapseIf : function(e) {
if (!e.within(this.wrap) && !e.within(this.list.el)) {
this.collapse();
}

},

selectNext : function() {
var sm = this.list.getSelectionModel();
if (!sm.getSelectedNode()) {
sm.select(this.list.getRootNode());
}

sm.selectNext();
},

selectPrev : function() {
var sm = this.list.getSelectionModel();
if (!sm.getSelectedNode()) {
sm.select(this.list.getRootNode());
}

sm.selectPrevious();
},

onViewClick : function(doFocus) {
this.collapse();
if (doFocus !== false) {
this.el.focus();
}

},

findNode : function(value, node, rootPath, like) {
var field = this;

if (node == null || node == undefined) {
node = field.list.getRootNode();
}

var value = value;

if (node.isLoaded() == true) {
if (node.childNodes.length > 0) {
field.nodeFound = node.findChild('text', value);

if (field.nodeFound == null || field.nodeFound == undefined) {
node.cascade(function() {
if (this.text == value) {
if ( (this.getPath('text') == rootPath) ||
(rootPath == null) ) {
field.nodeFound = this;
}

} else if (like == true) {
var str = this.text;
var found = str.indexOf(value);

if (found >= 0) {
field.nodeFound = this;
}

}

if (field.nodeFound != null
&& field.nodeFound != undefined) {
return false;
}

});

}

}

} else {
field.list.getLoader().load(node, function(loader, node, rootPath, like) {
node.loaded = true;
field.nodeFound = field.findNode(value, node, rootPath, like);
});

}

return field.nodeFound;
},

setValue : function(value, rootPath) {
if (this.list == undefined) {
this.initList();
}

if (value == '') {
this.setRawValue('');
return;
}

this.el.removeClass(this.emptyClass);
var nodeFound = this.findNode(value, null, rootPath, null);

if (nodeFound != null && nodeFound != undefined) {
text = nodeFound.attributes['text'];

if (text.length == 0) {
text = (!empty(this.value) ? this.value : '');
}

if ( (nodeFound.isLeaf() == false) &&
(this.admitLeaf == false) ) {
return;
}

var nodePath = nodeFound.getPath();
var treeRoot = this.list.getRootNode();
treeRoot.reload();
this.list.expandPath(nodePath);
this.list.selectPath(nodePath);

this.setRawValue(text);

if (this.hiddenField) {
this.hiddenField.value = value;
}

} else {
this.setRawValue();
var treeroot = this.list.getRootNode();
treeroot.reload();
this.list.collapseAll();
}

},

setValueFromNode : function(node) {
this.setRawValue(node.attributes.text);
if (this.hiddenField) {
this.hiddenField.value = node.id;
}

},

openCombo : function(){
this.onTriggerClick();
},

onTreeTypeAhead : function(){
var newValue = this.getRawValue();
var selStart = this.getRawValue().length;

if (selStart <= 0) {
this.setRawValue('');
var treeroot = this.list.getRootNode();
treeroot.reload();
this.list.collapseAll();
return;
}

var nodeFound = this.findNode(newValue, null, null, true);

if (nodeFound != null && nodeFound != undefined) {
text = nodeFound.attributes['text'];
var len = text.length;

if (selStart != len) {

if ( (nodeFound.isLeaf() == false) &&
(this.admitLeaf == false) ) {
return;
}

var nodePath = nodeFound.getPath();
var treeRoot = this.list.getRootNode();
treeRoot.reload();
this.list.expandPath(nodePath);
this.list.selectPath(nodePath);

this.setRawValue(text);
this.selectText(selStart, text.length);

if (this.hiddenField) {
this.hiddenField.value = newValue;
}

this.focus.defer(10, this);
}

}

},

onKeyUpTree : function(A) {
if (this.editable !== false && !A.isSpecialKey()) {
this.lastKeys = A.getKey();

if (this.treeTypeAhead && (this.lastKeys == Ext.EventObject.BACKSPACE || this.lastKeys == Ext.EventObject.DELETE) ) {
this.taTask.delay(250);
return;
}

if (this.treeTypeAhead) {
this.onTreeTypeAhead();
}

}

},

onNodeClick : function(node, e) {
if ( (node.isLeaf() == false) &&
(this.admitLeaf == false) ) {
return;
}

var oldValue = this.getValue();
this.setValueFromNode(node);
this.collapse();
if (this.treeTypeAhead) {
this.focus(true, false);
} else {
this.focus(false, false);
}

this.fireEvent('select', this, oldValue, this.getValue());
this.fireEvent('change', this, node);
this.fireEvent('rootchanged', node);
},

onTreeLoad : function(loader, node, response) {
if (this.list.getRootNode() == node) {
if (this.hiddenField && this.hiddenField.value
&& this.hiddenField.value != '') {
var n = this.list.getNodeById(this.hiddenField.value);
if (n) {
n.select();
this.setRawValue(n.attributes.text);
} else {
this.list.getSelectionModel().clearSelections();
this.setRawValue('');
this.hiddenField.value = '';
}

}

}

}

});

Ext.reg('treecombo', Ext.ux.TreeCombo);

ExtJS

Este es un framework para javascript, de lo mejor que he encontrado en el Internet, dentro de poco creare unos manuales para explicar como funciona y que podes hacer con esto.

Les dejo una pantalla de muestra mientras tanto y la URL del sitio oficial de ExtJS www.extjs.com

Lo recomiendo mucho, para que se hagan un ejemplo de como funciona aquí también les dejo algo básico.

 1:  Ext.onReady(function(){

 2:      

 3:      var p = new Ext.Panel({

 4:          title: 'Windows Title',

 5:          collapsible: false,

 6:          renderTo: 'helpBar',

 7:          width: 635,

 8:          height: 405

 9:      });

10:      

11:  });