examples/docs/source/ColumnNodeUI.html

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