Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / ColumnNodeUI.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">Ext.ns('Ext.ux.tree');\r
9 \r
10 <div id="cls-Ext.ux.tree.ColumnTree"></div>/**\r
11  * @class Ext.ux.tree.ColumnTree\r
12  * @extends Ext.tree.TreePanel\r
13  * \r
14  * @xtype columntree\r
15  */\r
16 Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {\r
17     lines : false,\r
18     borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell\r
19     cls : 'x-column-tree',\r
20 \r
21     onRender : function(){\r
22         Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);\r
23         this.headers = this.header.createChild({cls:'x-tree-headers'});\r
24 \r
25         var cols = this.columns, c;\r
26         var totalWidth = 0;\r
27         var scrollOffset = 19; // similar to Ext.grid.GridView default\r
28 \r
29         for(var i = 0, len = cols.length; i < len; i++){\r
30              c = cols[i];\r
31              totalWidth += c.width;\r
32              this.headers.createChild({\r
33                  cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),\r
34                  cn: {\r
35                      cls:'x-tree-hd-text',\r
36                      html: c.header\r
37                  },\r
38                  style:'width:'+(c.width-this.borderWidth)+'px;'\r
39              });\r
40         }\r
41         this.headers.createChild({cls:'x-clear'});\r
42         // prevent floats from wrapping when clipped\r
43         this.headers.setWidth(totalWidth+scrollOffset);\r
44         this.innerCt.setWidth(totalWidth);\r
45     }\r
46 });\r
47 \r
48 Ext.reg('columntree', Ext.ux.tree.ColumnTree);\r
49 \r
50 //backwards compat\r
51 Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;\r
52 \r
53 \r
54 <div id="cls-Ext.ux.tree.ColumnNodeUI"></div>/**\r
55  * @class Ext.ux.tree.ColumnNodeUI\r
56  * @extends Ext.tree.TreeNodeUI\r
57  */\r
58 Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {\r
59     focus: Ext.emptyFn, // prevent odd scrolling behavior\r
60 \r
61     renderElements : function(n, a, targetNode, bulkRender){\r
62         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';\r
63 \r
64         var t = n.getOwnerTree();\r
65         var cols = t.columns;\r
66         var bw = t.borderWidth;\r
67         var c = cols[0];\r
68 \r
69         var buf = [\r
70              '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',\r
71                 '<div class="x-tree-col" style="width:',c.width-bw,'px;">',\r
72                     '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",\r
73                     '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',\r
74                     '<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
75                     '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',\r
76                     a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',\r
77                     '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",\r
78                 "</div>"];\r
79          for(var i = 1, len = cols.length; i < len; i++){\r
80              c = cols[i];\r
81 \r
82              buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',\r
83                         '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",\r
84                       "</div>");\r
85          }\r
86          buf.push(\r
87             '<div class="x-clear"></div></div>',\r
88             '<ul class="x-tree-node-ct" style="display:none;"></ul>',\r
89             "</li>");\r
90 \r
91         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){\r
92             this.wrap = Ext.DomHelper.insertHtml("beforeBegin",\r
93                                 n.nextSibling.ui.getEl(), buf.join(""));\r
94         }else{\r
95             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));\r
96         }\r
97 \r
98         this.elNode = this.wrap.childNodes[0];\r
99         this.ctNode = this.wrap.childNodes[1];\r
100         var cs = this.elNode.firstChild.childNodes;\r
101         this.indentNode = cs[0];\r
102         this.ecNode = cs[1];\r
103         this.iconNode = cs[2];\r
104         this.anchor = cs[3];\r
105         this.textNode = cs[3].firstChild;\r
106     }\r
107 });\r
108 \r
109 //backwards compat\r
110 Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;\r
111 </pre>    \r
112 </body>\r
113 </html>