Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / examples / ux / ColumnNodeUI.js
diff --git a/examples/ux/ColumnNodeUI.js b/examples/ux/ColumnNodeUI.js
new file mode 100644 (file)
index 0000000..16254db
--- /dev/null
@@ -0,0 +1,109 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.ns('Ext.ux.tree');\r
+\r
+/**\r
+ * @class Ext.ux.tree.ColumnTree\r
+ * @extends Ext.tree.TreePanel\r
+ * \r
+ * @xtype columntree\r
+ */\r
+Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {\r
+    lines : false,\r
+    borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell\r
+    cls : 'x-column-tree',\r
+\r
+    onRender : function(){\r
+        Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);\r
+        this.headers = this.header.createChild({cls:'x-tree-headers'});\r
+\r
+        var cols = this.columns, c;\r
+        var totalWidth = 0;\r
+        var scrollOffset = 19; // similar to Ext.grid.GridView default\r
+\r
+        for(var i = 0, len = cols.length; i < len; i++){\r
+             c = cols[i];\r
+             totalWidth += c.width;\r
+             this.headers.createChild({\r
+                 cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),\r
+                 cn: {\r
+                     cls:'x-tree-hd-text',\r
+                     html: c.header\r
+                 },\r
+                 style:'width:'+(c.width-this.borderWidth)+'px;'\r
+             });\r
+        }\r
+        this.headers.createChild({cls:'x-clear'});\r
+        // prevent floats from wrapping when clipped\r
+        this.headers.setWidth(totalWidth+scrollOffset);\r
+        this.innerCt.setWidth(totalWidth);\r
+    }\r
+});\r
+\r
+Ext.reg('columntree', Ext.ux.tree.ColumnTree);\r
+\r
+//backwards compat\r
+Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;\r
+\r
+\r
+/**\r
+ * @class Ext.ux.tree.ColumnNodeUI\r
+ * @extends Ext.tree.TreeNodeUI\r
+ */\r
+Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {\r
+    focus: Ext.emptyFn, // prevent odd scrolling behavior\r
+\r
+    renderElements : function(n, a, targetNode, bulkRender){\r
+        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';\r
+\r
+        var t = n.getOwnerTree();\r
+        var cols = t.columns;\r
+        var bw = t.borderWidth;\r
+        var c = cols[0];\r
+\r
+        var buf = [\r
+             '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',\r
+                '<div class="x-tree-col" style="width:',c.width-bw,'px;">',\r
+                    '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",\r
+                    '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',\r
+                    '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',\r
+                    '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',\r
+                    a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',\r
+                    '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",\r
+                "</div>"];\r
+         for(var i = 1, len = cols.length; i < len; i++){\r
+             c = cols[i];\r
+\r
+             buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',\r
+                        '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",\r
+                      "</div>");\r
+         }\r
+         buf.push(\r
+            '<div class="x-clear"></div></div>',\r
+            '<ul class="x-tree-node-ct" style="display:none;"></ul>',\r
+            "</li>");\r
+\r
+        if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){\r
+            this.wrap = Ext.DomHelper.insertHtml("beforeBegin",\r
+                                n.nextSibling.ui.getEl(), buf.join(""));\r
+        }else{\r
+            this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));\r
+        }\r
+\r
+        this.elNode = this.wrap.childNodes[0];\r
+        this.ctNode = this.wrap.childNodes[1];\r
+        var cs = this.elNode.firstChild.childNodes;\r
+        this.indentNode = cs[0];\r
+        this.ecNode = cs[1];\r
+        this.iconNode = cs[2];\r
+        this.anchor = cs[3];\r
+        this.textNode = cs[3].firstChild;\r
+    }\r
+});\r
+\r
+//backwards compat\r
+Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;\r