git.roojs.org Git - roojs1/blob - docs/src/Roo_tree_ColumnTree.js.html

   1 <html><head><title>/home/edward/gitlive/roojs1/Roo/tree/ColumnTree.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">//&lt;Script type=&quot;text/javascript&quot;&gt;
   2
   3 /*
   4  * Based on:
   5  * Ext JS Library 1.1.1
   6  * Copyright(c) 2006-2007, Ext JS, LLC.
   7  *
   8  * Originally Released Under LGPL - original licence link has changed is not relivant.
   9  *
  10  * Fork - LGPL
  11  * &lt;script type=&quot;text/javascript&quot;&gt;
  12  */
  13
  14
  15 /**
  16  * @class Roo.tree.ColumnTree
  17  * @extends Roo.data.TreePanel
  18  * @cfg {Object} columns  Including width, header, renderer, cls, dataIndex
  19  * @cfg {int} borderWidth  compined right/left border allowance
  20  * @constructor
  21  * @param {String/HTMLElement/Element} el The container element
  22  * @param {Object} config
  23  */
  24 </span><span class="jsdoc-var">Roo.tree.ColumnTree </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">)
  25 {
  26    </span><span class="jsdoc-var">Roo.tree.ColumnTree.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  27    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  28         </span><span class="jsdoc-comment">/**
  29         * @event resize
  30         * Fire this event on a container when it resizes
  31         * @param {int} w Width
  32         * @param {int} h Height
  33         */
  34        </span><span class="jsdoc-string">&quot;resize&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  35     </span><span class="jsdoc-syntax">});
  36     </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onResize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  37 };
  38
  39 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.tree.ColumnTree</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.tree.TreePanel</span><span class="jsdoc-syntax">, {
  40     </span><span class="jsdoc-comment">//lines:false,
  41
  42
  43     </span><span class="jsdoc-var">borderWidth</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.isBorderBox </span><span class="jsdoc-syntax">? 0 : 2,
  44     </span><span class="jsdoc-var">headEls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  45
  46     </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  47         </span><span class="jsdoc-comment">// add the header.....
  48
  49         </span><span class="jsdoc-var">Roo.tree.ColumnTree.superclass.render.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  50
  51         </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-column-tree'</span><span class="jsdoc-syntax">);
  52
  53         </span><span class="jsdoc-var">this.headers </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">(
  54             {</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'x-tree-headers'</span><span class="jsdoc-syntax">},</span><span class="jsdoc-var">this.innerCt.dom</span><span class="jsdoc-syntax">);
  55
  56         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.columns</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
  57         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">= 0;
  58         </span><span class="jsdoc-var">this.headEls </span><span class="jsdoc-syntax">= [];
  59         </span><span class="jsdoc-keyword">var  </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cols.length</span><span class="jsdoc-syntax">;
  60         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
  61              </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cols</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
  62              </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">c.width</span><span class="jsdoc-syntax">;
  63             </span><span class="jsdoc-var">this.headEls.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.headers.createChild</span><span class="jsdoc-syntax">({
  64                  </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'x-tree-hd ' </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">c.cls</span><span class="jsdoc-syntax">?</span><span class="jsdoc-var">c.cls</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'-hd'</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">),
  65                  </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: {
  66                      </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'x-tree-hd-text'</span><span class="jsdoc-syntax">,
  67                      </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">c.header
  68                  </span><span class="jsdoc-syntax">},
  69                  </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'width:'</span><span class="jsdoc-syntax">+(</span><span class="jsdoc-var">c.width</span><span class="jsdoc-syntax">-</span><span class="jsdoc-var">this.borderWidth</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-string">'px;'
  70              </span><span class="jsdoc-syntax">}));
  71         }
  72         </span><span class="jsdoc-var">this.headers.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'x-clear'</span><span class="jsdoc-syntax">});
  73         </span><span class="jsdoc-comment">// prevent floats from wrapping when clipped
  74         </span><span class="jsdoc-var">this.headers.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">totalWidth</span><span class="jsdoc-syntax">);
  75         </span><span class="jsdoc-comment">//this.innerCt.setWidth(totalWidth);
  76         </span><span class="jsdoc-var">this.innerCt.setStyle</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">overflow</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'auto' </span><span class="jsdoc-syntax">});
  77         </span><span class="jsdoc-var">this.onResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">);
  78
  79
  80     },
  81     </span><span class="jsdoc-var">onResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">)
  82     {
  83         </span><span class="jsdoc-var">this.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
  84         </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
  85         </span><span class="jsdoc-comment">// resize cols..
  86         </span><span class="jsdoc-var">this.innerCt.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">);
  87         </span><span class="jsdoc-var">this.innerCt.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">-20);
  88
  89         </span><span class="jsdoc-comment">// headers...
  90         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.columns</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">;
  91         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">= 0;
  92         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">expEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
  93         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cols.length</span><span class="jsdoc-syntax">;
  94         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
  95             </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cols</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
  96             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoExpandColumn </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">c.dataIndex </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.autoExpandColumn</span><span class="jsdoc-syntax">) {
  97                 </span><span class="jsdoc-comment">// it's the expander..
  98                 </span><span class="jsdoc-var">expEl  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.headEls</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
  99                 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
 100             }
 101             </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">c.width</span><span class="jsdoc-syntax">;
 102
 103         }
 104         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">expEl</span><span class="jsdoc-syntax">) {
 105             </span><span class="jsdoc-var">expEl.setWidth</span><span class="jsdoc-syntax">(  ((</span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">totalWidth</span><span class="jsdoc-syntax">)-</span><span class="jsdoc-var">this.borderWidth </span><span class="jsdoc-syntax">- 20));
 106         }
 107         </span><span class="jsdoc-var">this.headers.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">-20);
 108
 109
 110
 111
 112     }
 113 });
 114 </span></code></body></html>