The TreePanel provides tree-structured UI representation of tree-structured data.
+ *{@link Ext.tree.TreeNode TreeNode}s added to the TreePanel may each contain metadata + * used by your application in their {@link Ext.tree.TreeNode#attributes attributes} property.
+ *A TreePanel must have a {@link #root} node before it is rendered. This may either be + * specified using the {@link #root} config option, or using the {@link #setRootNode} method. + *
An example of tree rendered to an existing div:
+var tree = new Ext.tree.TreePanel({
+ renderTo: 'tree-div',
+ useArrows: true,
+ autoScroll: true,
+ animate: true,
+ enableDD: true,
+ containerScroll: true,
+ border: false,
+ // auto create TreeLoader
+ dataUrl: 'get-nodes.php',
+
+ root: {
+ nodeType: 'async',
+ text: 'Ext JS',
+ draggable: false,
+ id: 'source'
+ }
+});
+
+tree.getRootNode().expand();
+ * The example above would work with a data packet similar to this:
+[{
+ "text": "adapter",
+ "id": "source\/adapter",
+ "cls": "folder"
+}, {
+ "text": "dd",
+ "id": "source\/dd",
+ "cls": "folder"
+}, {
+ "text": "debug.js",
+ "id": "source\/debug.js",
+ "leaf": true,
+ "cls": "file"
+}]
+ * An example of tree within a Viewport:
+new Ext.Viewport({
+ layout: 'border',
+ items: [{
+ region: 'west',
+ collapsible: true,
+ title: 'Navigation',
+ xtype: 'treepanel',
+ width: 200,
+ autoScroll: true,
+ split: true,
+ loader: new Ext.tree.TreeLoader(),
+ root: new Ext.tree.AsyncTreeNode({
+ expanded: true,
+ children: [{
+ text: 'Menu Option 1',
+ leaf: true
+ }, {
+ text: 'Menu Option 2',
+ leaf: true
+ }, {
+ text: 'Menu Option 3',
+ leaf: true
+ }]
+ }),
+ rootVisible: false,
+ listeners: {
+ click: function(n) {
+ Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
+ }
+ }
+ }, {
+ region: 'center',
+ xtype: 'tabpanel',
+ // remaining code not shown ...
+ }]
+});
+
+new Ext.tree.TreePanel({
+ title: 'My TreePanel',
+ root: new Ext.tree.AsyncTreeNode({
+ text: 'The Root',
+ children: [
+ { text: 'Child node 1', leaf: true },
+ { text: 'Child node 2', leaf: true }
+ ]
+ }),
+ contextMenu: new Ext.menu.Menu({
+ items: [{
+ id: 'delete-node',
+ text: 'Delete Node'
+ }],
+ listeners: {
+ itemclick: function(item) {
+ switch (item.id) {
+ case 'delete-node':
+ var n = item.parentMenu.contextNode;
+ if (n.parentNode) {
+ n.remove();
+ }
+ break;
+ }
+ }
+ }
+ }),
+ listeners: {
+ contextmenu: function(node, e) {
+// Register the context node with the menu so that a Menu Item's handler function can access
+// it via its {@link Ext.menu.BaseItem#parentMenu parentMenu} property.
+ node.select();
+ var c = node.getOwnerTree().contextMenu;
+ c.contextNode = node;
+ c.showAt(e.getXY());
+ }
+ }
+});
+
+ * If you are customizing the Tree's user interface, you
+ * may need to extend this class, but you should never need to instantiate this class.
+ *
+ * This class provides access to the user interface components of an Ext TreeNode, through + * {@link Ext.tree.TreeNode#getUI} + */ +Ext.tree.TreeNodeUI = function(node){ + this.node = node; + this.rendered = false; + this.animating = false; + this.wasLeaf = true; + this.ecc = 'x-tree-ec-icon x-tree-elbow'; + this.emptyIcon = Ext.BLANK_IMAGE_URL; +}; + +Ext.tree.TreeNodeUI.prototype = { + // private + removeChild : function(node){ + if(this.rendered){ + this.ctNode.removeChild(node.ui.getEl()); + } + }, + + // private + beforeLoad : function(){ + this.addClass("x-tree-node-loading"); + }, + + // private + afterLoad : function(){ + this.removeClass("x-tree-node-loading"); + }, + + // private + onTextChange : function(node, text, oldText){ + if(this.rendered){ + this.textNode.innerHTML = text; + } + }, + + // private + onDisableChange : function(node, state){ + this.disabled = state; + if (this.checkbox) { + this.checkbox.disabled = state; + } + if(state){ + this.addClass("x-tree-node-disabled"); + }else{ + this.removeClass("x-tree-node-disabled"); + } + }, + + // private + onSelectedChange : function(state){ + if(state){ + this.focus(); + this.addClass("x-tree-selected"); + }else{ + //this.blur(); + this.removeClass("x-tree-selected"); + } + }, + + // private + onMove : function(tree, node, oldParent, newParent, index, refNode){ + this.childIndent = null; + if(this.rendered){ + var targetNode = newParent.ui.getContainer(); + if(!targetNode){//target not rendered + this.holder = document.createElement("div"); + this.holder.appendChild(this.wrap); + return; + } + var insertBefore = refNode ? refNode.ui.getEl() : null; + if(insertBefore){ + targetNode.insertBefore(this.wrap, insertBefore); + }else{ + targetNode.appendChild(this.wrap); + } + this.node.renderIndent(true, oldParent != newParent); + } + }, + +/** + * Adds one or more CSS classes to the node's UI element. + * Duplicate classes are automatically filtered out. + * @param {String/Array} className The CSS class to add, or an array of classes + */ + addClass : function(cls){ + if(this.elNode){ + Ext.fly(this.elNode).addClass(cls); + } + }, + +/** + * Removes one or more CSS classes from the node's UI element. + * @param {String/Array} className The CSS class to remove, or an array of classes + */ + removeClass : function(cls){ + if(this.elNode){ + Ext.fly(this.elNode).removeClass(cls); + } + }, + + // private + remove : function(){ + if(this.rendered){ + this.holder = document.createElement("div"); + this.holder.appendChild(this.wrap); + } + }, + + // private + fireEvent : function(){ + return this.node.fireEvent.apply(this.node, arguments); + }, + + // private + initEvents : function(){ + this.node.on("move", this.onMove, this); + + if(this.node.disabled){ + this.addClass("x-tree-node-disabled"); + if (this.checkbox) { + this.checkbox.disabled = true; + } + } + if(this.node.hidden){ + this.hide(); + } + var ot = this.node.getOwnerTree(); + var dd = ot.enableDD || ot.enableDrag || ot.enableDrop; + if(dd && (!this.node.isRoot || ot.rootVisible)){ + Ext.dd.Registry.register(this.elNode, { + node: this.node, + handles: this.getDDHandles(), + isHandle: false + }); + } + }, + + // private + getDDHandles : function(){ + return [this.iconNode, this.textNode, this.elNode]; + }, + +/** + * Hides this node. + */ + hide : function(){ + this.node.hidden = true; + if(this.wrap){ + this.wrap.style.display = "none"; + } + }, + +/** + * Shows this node. + */ + show : function(){ + this.node.hidden = false; + if(this.wrap){ + this.wrap.style.display = ""; + } + }, + + // private + onContextMenu : function(e){ + if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) { + e.preventDefault(); + this.focus(); + this.fireEvent("contextmenu", this.node, e); + } + }, + + // private + onClick : function(e){ + if(this.dropping){ + e.stopEvent(); + return; + } + if(this.fireEvent("beforeclick", this.node, e) !== false){ + var a = e.getTarget('a'); + if(!this.disabled && this.node.attributes.href && a){ + this.fireEvent("click", this.node, e); + return; + }else if(a && e.ctrlKey){ + e.stopEvent(); + } + e.preventDefault(); + if(this.disabled){ + return; + } + + if(this.node.attributes.singleClickExpand && !this.animating && this.node.isExpandable()){ + this.node.toggle(); + } + + this.fireEvent("click", this.node, e); + }else{ + e.stopEvent(); + } + }, + + // private + onDblClick : function(e){ + e.preventDefault(); + if(this.disabled){ + return; + } + if(this.checkbox){ + this.toggleCheck(); + } + if(!this.animating && this.node.isExpandable()){ + this.node.toggle(); + } + this.fireEvent("dblclick", this.node, e); + }, + + onOver : function(e){ + this.addClass('x-tree-node-over'); + }, + + onOut : function(e){ + this.removeClass('x-tree-node-over'); + }, + + // private + onCheckChange : function(){ + var checked = this.checkbox.checked; + // fix for IE6 + this.checkbox.defaultChecked = checked; + this.node.attributes.checked = checked; + this.fireEvent('checkchange', this.node, checked); + }, + + // private + ecClick : function(e){ + if(!this.animating && this.node.isExpandable()){ + this.node.toggle(); + } + }, + + // private + startDrop : function(){ + this.dropping = true; + }, + + // delayed drop so the click event doesn't get fired on a drop + endDrop : function(){ + setTimeout(function(){ + this.dropping = false; + }.createDelegate(this), 50); + }, + + // private + expand : function(){ + this.updateExpandIcon(); + this.ctNode.style.display = ""; + }, + + // private + focus : function(){ + if(!this.node.preventHScroll){ + try{this.anchor.focus(); + }catch(e){} + }else{ + try{ + var noscroll = this.node.getOwnerTree().getTreeEl().dom; + var l = noscroll.scrollLeft; + this.anchor.focus(); + noscroll.scrollLeft = l; + }catch(e){} + } + }, + +/** + * Sets the checked status of the tree node to the passed value, or, if no value was passed, + * toggles the checked status. If the node was rendered with no checkbox, this has no effect. + * @param {Boolean} (optional) The new checked status. + */ + toggleCheck : function(value){ + var cb = this.checkbox; + if(cb){ + cb.checked = (value === undefined ? !cb.checked : value); + this.onCheckChange(); + } + }, + + // private + blur : function(){ + try{ + this.anchor.blur(); + }catch(e){} + }, + + // private + animExpand : function(callback){ + var ct = Ext.get(this.ctNode); + ct.stopFx(); + if(!this.node.isExpandable()){ + this.updateExpandIcon(); + this.ctNode.style.display = ""; + Ext.callback(callback); + return; + } + this.animating = true; + this.updateExpandIcon(); + + ct.slideIn('t', { + callback : function(){ + this.animating = false; + Ext.callback(callback); + }, + scope: this, + duration: this.node.ownerTree.duration || .25 + }); + }, + + // private + highlight : function(){ + var tree = this.node.getOwnerTree(); + Ext.fly(this.wrap).highlight( + tree.hlColor || "C3DAF9", + {endColor: tree.hlBaseColor} + ); + }, + + // private + collapse : function(){ + this.updateExpandIcon(); + this.ctNode.style.display = "none"; + }, + + // private + animCollapse : function(callback){ + var ct = Ext.get(this.ctNode); + ct.enableDisplayMode('block'); + ct.stopFx(); + + this.animating = true; + this.updateExpandIcon(); + + ct.slideOut('t', { + callback : function(){ + this.animating = false; + Ext.callback(callback); + }, + scope: this, + duration: this.node.ownerTree.duration || .25 + }); + }, + + // private + getContainer : function(){ + return this.ctNode; + }, + + // private + getEl : function(){ + return this.wrap; + }, + + // private + appendDDGhost : function(ghostNode){ + ghostNode.appendChild(this.elNode.cloneNode(true)); + }, + + // private + getDDRepairXY : function(){ + return Ext.lib.Dom.getXY(this.iconNode); + }, + + // private + onRender : function(){ + this.render(); + }, + + // private + render : function(bulkRender){ + var n = this.node, a = n.attributes; + var targetNode = n.parentNode ? + n.parentNode.ui.getContainer() : n.ownerTree.innerCt.dom; + + if(!this.rendered){ + this.rendered = true; + + this.renderElements(n, a, targetNode, bulkRender); + + if(a.qtip){ + if(this.textNode.setAttributeNS){ + this.textNode.setAttributeNS("ext", "qtip", a.qtip); + if(a.qtipTitle){ + this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle); + } + }else{ + this.textNode.setAttribute("ext:qtip", a.qtip); + if(a.qtipTitle){ + this.textNode.setAttribute("ext:qtitle", a.qtipTitle); + } + } + }else if(a.qtipCfg){ + a.qtipCfg.target = Ext.id(this.textNode); + Ext.QuickTips.register(a.qtipCfg); + } + this.initEvents(); + if(!this.node.expanded){ + this.updateExpandIcon(true); + } + }else{ + if(bulkRender === true) { + targetNode.appendChild(this.wrap); + } + } + }, + + // private + renderElements : function(n, a, targetNode, bulkRender){ + // add some indent caching, this helps performance when rendering a large tree + this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : ''; + + var cb = typeof a.checked == 'boolean'; + + var href = a.href ? a.href : Ext.isGecko ? "" : "#"; + var buf = ['
+ * If you are customizing the Tree's user interface, you
+ * may need to extend this class, but you should never need to instantiate this class.
+ */
+Ext.tree.RootTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
+ // private
+ render : function(){
+ if(!this.rendered){
+ var targetNode = this.node.ownerTree.innerCt.dom;
+ this.node.expanded = true;
+ targetNode.innerHTML = '
+ [{
+ id: 1,
+ text: 'A leaf Node',
+ leaf: true
+ },{
+ id: 2,
+ text: 'A folder Node',
+ children: [{
+ id: 3,
+ text: 'A child Node',
+ leaf: true
+ }]
+ }]
+
+ myTreeLoader.on("beforeload", function(treeLoader, node) {
+ this.baseParams.category = node.attributes.category;
+ }, this);
+
+paramOrder: ['param1','param2','param3']
+paramOrder: 'param1 param2 param3'
+paramOrder: 'param1,param2,param3'
+paramOrder: 'param1|param2|param'
+ Override this function for custom TreeNode node implementation, or to + * modify the attributes at creation time.
+ * Example:
+new Ext.tree.TreePanel({
+ ...
+ new Ext.tree.TreeLoader({
+ url: 'dataUrl',
+ createNode: function(attr) {
+// Allow consolidation consignments to have
+// consignments dropped into them.
+ if (attr.isConsolidation) {
+ attr.iconCls = 'x-consol',
+ attr.allowDrop = true;
+ }
+ return Ext.tree.TreeLoader.prototype.call(this, attr);
+ }
+ }),
+ ...
+});
+
+new Ext.tree.TreeSorter(myTree, {
+ folderSort: true,
+ dir: "desc",
+ sortType: function(node) {
+ // sort by a custom, typed attribute:
+ return parseInt(node.id, 10);
+ }
+});
+