examples/ux/ColumnNodeUI.js

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