examples/tree/ColumnNodeUI.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {\r
  10     lines:false,\r
  11     borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell\r
  12     cls:'x-column-tree',\r
  13     \r
  14     onRender : function(){\r
  15         Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);\r
  16         this.headers = this.body.createChild(\r
  17             {cls:'x-tree-headers'},this.innerCt.dom);\r
  18 \r
  19         var cols = this.columns, c;\r
  20         var totalWidth = 0;\r
  21 \r
  22         for(var i = 0, len = cols.length; i < len; i++){\r
  23              c = cols[i];\r
  24              totalWidth += c.width;\r
  25              this.headers.createChild({\r
  26                  cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),\r
  27                  cn: {\r
  28                      cls:'x-tree-hd-text',\r
  29                      html: c.header\r
  30                  },\r
  31                  style:'width:'+(c.width-this.borderWidth)+'px;'\r
  32              });\r
  33         }\r
  34         this.headers.createChild({cls:'x-clear'});\r
  35         // prevent floats from wrapping when clipped\r
  36         this.headers.setWidth(totalWidth);\r
  37         this.innerCt.setWidth(totalWidth);\r
  38     }\r
  39 });\r
  40 \r
  41 Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {\r
  42     focus: Ext.emptyFn, // prevent odd scrolling behavior\r
  43 \r
  44     renderElements : function(n, a, targetNode, bulkRender){\r
  45         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';\r
  46 \r
  47         var t = n.getOwnerTree();\r
  48         var cols = t.columns;\r
  49         var bw = t.borderWidth;\r
  50         var c = cols[0];\r
  51 \r
  52         var buf = [\r
  53              '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',\r
  54                 '<div class="x-tree-col" style="width:',c.width-bw,'px;">',\r
  55                     '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",\r
  56                     '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',\r
  57                     '<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
  58                     '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',\r
  59                     a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',\r
  60                     '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",\r
  61                 "</div>"];\r
  62          for(var i = 1, len = cols.length; i < len; i++){\r
  63              c = cols[i];\r
  64 \r
  65              buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',\r
  66                         '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",\r
  67                       "</div>");\r
  68          }\r
  69          buf.push(\r
  70             '<div class="x-clear"></div></div>',\r
  71             '<ul class="x-tree-node-ct" style="display:none;"></ul>',\r
  72             "</li>");\r
  73 \r
  74         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){\r
  75             this.wrap = Ext.DomHelper.insertHtml("beforeBegin",\r
  76                                 n.nextSibling.ui.getEl(), buf.join(""));\r
  77         }else{\r
  78             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));\r
  79         }\r
  80 \r
  81         this.elNode = this.wrap.childNodes[0];\r
  82         this.ctNode = this.wrap.childNodes[1];\r
  83         var cs = this.elNode.firstChild.childNodes;\r
  84         this.indentNode = cs[0];\r
  85         this.ecNode = cs[1];\r
  86         this.iconNode = cs[2];\r
  87         this.anchor = cs[3];\r
  88         this.textNode = cs[3].firstChild;\r
  89     }\r
  90 });