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);

JavaScript image combobox v2.1 by Marghoob Suleman

Encontré hace algunos días, este gran Jquery Plugin, hice un pequeño skin para el mismo y adicione un pequeño código para arreglar un problema al cargar con elementos no visibles inicialmente.

El código original lo pueden descargar de http://www.marghoobsuleman.com/jquery-image-dropdown

Como se vería el skin que hice

Pueden descargar el skin desde aquí

No olviden visitar la web del autor.