1 <html><head><title>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">//<Script type="text/javascript">
6 * Copyright(c) 2006-2007, Ext JS, LLC.
8 * Originally Released Under LGPL - original licence link has changed is not relivant.
11 * <script type="text/javascript">
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
21 * @param {String/HTMLElement/Element} el The container element
22 * @param {Object} config
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">)
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">/**
30 * Fire this event on a container when it resizes
31 * @param {int} w Width
32 * @param {int} h Height
34 </span><span class="jsdoc-string">"resize" </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">);
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,
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">,
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.....
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">);
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">);
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">);
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">< </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">}));
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">);
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">)
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);
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">< </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">&& </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">;
101 </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">c.width</span><span class="jsdoc-syntax">;
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));
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);
114 </span></code></body></html>