projects / roojs1 / blob
? search:


0ca90a0b5eb98a791a7d0193d11e5373cf5963d6
[roojs1] / docs / symbols / src / Roo_bootstrap_LayoutMasonryAuto.js.html
1 <html><head><title>../roojs1/Roo/bootstrap/LayoutMasonryAuto.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">/**
2  *
3  * This is based on 
4  * http://masonry.desandro.com
5  *
6  * The idea is to render all the bricks based on vertical width...
7  *
8  * The original code extends 'outlayer' - we might need to use that....
9  * 
10  */
11
12
13 /**
14  * @class Roo.bootstrap.LayoutMasonryAuto
15  * @extends Roo.bootstrap.Component
16  * Bootstrap Layout Masonry class
17  * 
18  * @constructor
19  * Create a new Element
20  * @param {Object} config The config object
21  */
22
23 </span><span class="jsdoc-var">Roo.bootstrap.LayoutMasonryAuto </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
24     </span><span class="jsdoc-var">Roo.bootstrap.LayoutMasonryAuto.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
25 };
26
27 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.LayoutMasonryAuto</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
28     
29       </span><span class="jsdoc-comment">/**
30      * @cfg {Boolean} isFitWidth  - resize the width..
31      */   
32     </span><span class="jsdoc-var">isFitWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-comment">// options..
33     /**
34      * @cfg {Boolean} isOriginLeft = left align?
35      */   
36     </span><span class="jsdoc-var">isOriginLeft </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
37     </span><span class="jsdoc-comment">/**
38      * @cfg {Boolean} isOriginTop = top align?
39      */   
40     </span><span class="jsdoc-var">isOriginTop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
41     </span><span class="jsdoc-comment">/**
42      * @cfg {Boolean} isLayoutInstant = no animation?
43      */   
44     </span><span class="jsdoc-var">isLayoutInstant </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// needed?
45     /**
46      * @cfg {Boolean} isResizingContainer = not sure if this is used..
47      */   
48     </span><span class="jsdoc-var">isResizingContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
49     </span><span class="jsdoc-comment">/**
50      * @cfg {Number} columnWidth  width of the columns 
51      */   
52     
53     </span><span class="jsdoc-var">columnWidth </span><span class="jsdoc-syntax">: 0,
54     </span><span class="jsdoc-comment">/**
55      * @cfg {Number} padHeight padding below box..
56      */   
57     
58     </span><span class="jsdoc-var">padHeight </span><span class="jsdoc-syntax">: 10, 
59     
60     </span><span class="jsdoc-comment">/**
61      * @cfg {Boolean} isAutoInitial defalut true
62      */   
63     
64     </span><span class="jsdoc-var">isAutoInitial </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">, 
65     
66     </span><span class="jsdoc-comment">// private?
67     </span><span class="jsdoc-var">gutter </span><span class="jsdoc-syntax">: 0,
68     
69     </span><span class="jsdoc-var">containerWidth</span><span class="jsdoc-syntax">: 0,
70     </span><span class="jsdoc-var">initialColumnWidth </span><span class="jsdoc-syntax">: 0,
71     </span><span class="jsdoc-var">currentSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
72     
73     </span><span class="jsdoc-var">colYs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// array.
74     </span><span class="jsdoc-var">maxY </span><span class="jsdoc-syntax">: 0,
75     </span><span class="jsdoc-var">padWidth</span><span class="jsdoc-syntax">: 10,
76     
77     
78     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
79     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
80     </span><span class="jsdoc-var">bricks</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">//CompositeElement
81     </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">: 0, </span><span class="jsdoc-comment">// array?
82     // element : null, // wrapped now this.el
83     </span><span class="jsdoc-var">_isLayoutInited </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, 
84     
85     
86     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
87         
88         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
89             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.tag</span><span class="jsdoc-syntax">,
90             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'blog-masonary-wrapper ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">,
91             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: {
92                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'mas-boxes masonary'
93             </span><span class="jsdoc-syntax">}
94         };
95         
96         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
97     },
98     
99     </span><span class="jsdoc-var">getChildContainer</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( )
100     {
101         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.boxesEl</span><span class="jsdoc-syntax">) {
102             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.boxesEl</span><span class="jsdoc-syntax">;
103         }
104         
105         </span><span class="jsdoc-var">this.boxesEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.mas-boxes'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
106         
107         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.boxesEl</span><span class="jsdoc-syntax">;
108     },
109     
110     
111     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
112     {
113         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
114         
115         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isAutoInitial</span><span class="jsdoc-syntax">){
116             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hook children rendered'</span><span class="jsdoc-syntax">);
117             </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'childrenrendered'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
118                 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'children rendered'</span><span class="jsdoc-syntax">);
119                 </span><span class="jsdoc-var">_this.initial</span><span class="jsdoc-syntax">();
120             } ,</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
121         }
122         
123     },
124     
125     </span><span class="jsdoc-var">initial </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
126     {
127         </span><span class="jsdoc-var">this.reloadItems</span><span class="jsdoc-syntax">();
128
129         </span><span class="jsdoc-var">this.currentSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
130
131         </span><span class="jsdoc-comment">/// was window resize... - let's see if this works..
132         </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">); 
133
134         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isAutoInitial</span><span class="jsdoc-syntax">){
135             </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
136             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
137         }
138         
139         </span><span class="jsdoc-var">this.layout.defer</span><span class="jsdoc-syntax">(500,</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
140     },
141     
142     </span><span class="jsdoc-var">reloadItems</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
143     {
144         </span><span class="jsdoc-var">this.bricks </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.masonry-brick'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
145         
146         </span><span class="jsdoc-var">this.bricks.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">) {
147             </span><span class="jsdoc-comment">//Roo.log(b.getSize());
148             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">b.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'originalwidth'</span><span class="jsdoc-syntax">)) {
149                 </span><span class="jsdoc-var">b.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'originalwidth'</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">b.getSize</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.width</span><span class="jsdoc-syntax">);
150             }
151             
152         });
153         
154         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bricks.elements.length</span><span class="jsdoc-syntax">);
155     },
156     
157     </span><span class="jsdoc-var">resize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
158     {
159         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">);
160         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
161         
162         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.currentSize.width </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">cs.width </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.currentSize.x </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">cs.x </span><span class="jsdoc-syntax">) {
163             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;no change in with or X&quot;</span><span class="jsdoc-syntax">);
164             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
165         }
166         </span><span class="jsdoc-var">this.currentSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">;
167         </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
168     },
169     
170     </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
171     {
172          </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'layout'</span><span class="jsdoc-syntax">);
173         </span><span class="jsdoc-var">this._resetLayout</span><span class="jsdoc-syntax">();
174         </span><span class="jsdoc-comment">//this._manageStamps();
175       
176         // don't animate first layout
177         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.isLayoutInstant </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.isLayoutInstant </span><span class="jsdoc-syntax">: !</span><span class="jsdoc-var">this._isLayoutInited</span><span class="jsdoc-syntax">;
178         </span><span class="jsdoc-var">this.layoutItems</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">);
179       
180         </span><span class="jsdoc-comment">// flag for initalized
181         </span><span class="jsdoc-var">this._isLayoutInited </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
182     },
183     
184     </span><span class="jsdoc-var">layoutItems </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">)
185     {
186         </span><span class="jsdoc-comment">//var items = this._getItemsForLayout( this.items );
187         // original code supports filtering layout items.. we just ignore it..
188         
189         </span><span class="jsdoc-var">this._layoutItems</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.bricks </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">);
190       
191         </span><span class="jsdoc-var">this._postLayout</span><span class="jsdoc-syntax">();
192     },
193     </span><span class="jsdoc-var">_layoutItems </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isInstant</span><span class="jsdoc-syntax">)
194     {
195        </span><span class="jsdoc-comment">//this.fireEvent( 'layout', this, items );
196     
197
198         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( !</span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">items.elements.length </span><span class="jsdoc-syntax">) {
199           </span><span class="jsdoc-comment">// no items, emit event with empty array
200             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
201         }
202
203         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">queue </span><span class="jsdoc-syntax">= [];
204         </span><span class="jsdoc-var">items.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">) {
205             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;layout item&quot;</span><span class="jsdoc-syntax">);
206             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
207             </span><span class="jsdoc-comment">// get x/y object from method
208             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getItemLayoutPosition</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">);
209             </span><span class="jsdoc-comment">// enqueue
210             </span><span class="jsdoc-var">position.item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
211             </span><span class="jsdoc-var">position.isInstant </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">isInstant</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// || item.isLayoutInstant; &lt;&lt; not set yet...
212             </span><span class="jsdoc-var">queue.push</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">);
213         }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
214       
215         </span><span class="jsdoc-var">this._processLayoutQueue</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">queue </span><span class="jsdoc-syntax">);
216     },
217     </span><span class="jsdoc-comment">/** Sets position of item in DOM
218     * @param {Element} item
219     * @param {Number} x - horizontal position
220     * @param {Number} y - vertical position
221     * @param {Boolean} isInstant - disables transitions
222     */
223     </span><span class="jsdoc-var">_processLayoutQueue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">queue </span><span class="jsdoc-syntax">)
224     {
225         </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">queue.length</span><span class="jsdoc-syntax">; </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">++ ) {
226             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">obj </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">queue</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
227             </span><span class="jsdoc-var">obj.item.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'absolute'</span><span class="jsdoc-syntax">);
228             </span><span class="jsdoc-var">obj.item.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">obj.x</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">obj.y</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">obj.isInstant </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
229         }
230     },
231       
232     
233     </span><span class="jsdoc-comment">/**
234     * Any logic you want to do after each layout,
235     * i.e. size the container
236     */
237     </span><span class="jsdoc-var">_postLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
238     {
239         </span><span class="jsdoc-var">this.resizeContainer</span><span class="jsdoc-syntax">();
240     },
241     
242     </span><span class="jsdoc-var">resizeContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
243     {
244         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( !</span><span class="jsdoc-var">this.isResizingContainer </span><span class="jsdoc-syntax">) {
245             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
246         }
247         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getContainerSize</span><span class="jsdoc-syntax">();
248         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">) {
249             </span><span class="jsdoc-var">this.el.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">);
250             </span><span class="jsdoc-var">this.boxesEl.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">);
251         }
252     },
253     
254     
255     
256     </span><span class="jsdoc-var">_resetLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
257     {
258         </span><span class="jsdoc-comment">//this.getSize();  // -- does not really do anything.. it probably applies left/right etc. to obuject but not used
259         </span><span class="jsdoc-var">this.colWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">();
260         </span><span class="jsdoc-comment">//this.gutter = this.el.getWidth(); 
261         
262         </span><span class="jsdoc-var">this.measureColumns</span><span class="jsdoc-syntax">();
263
264         </span><span class="jsdoc-comment">// reset column Y
265         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">;
266         </span><span class="jsdoc-var">this.colYs </span><span class="jsdoc-syntax">= [];
267         </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">--) {
268             </span><span class="jsdoc-var">this.colYs.push</span><span class="jsdoc-syntax">( 0 );
269         }
270     
271         </span><span class="jsdoc-var">this.maxY </span><span class="jsdoc-syntax">= 0;
272     },
273
274     </span><span class="jsdoc-var">measureColumns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
275     {
276         </span><span class="jsdoc-var">this.getContainerWidth</span><span class="jsdoc-syntax">();
277       </span><span class="jsdoc-comment">// if columnWidth is 0, default to outerWidth of first item
278         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( !</span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">) {
279             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">firstItem </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.bricks.first</span><span class="jsdoc-syntax">();
280             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">firstItem</span><span class="jsdoc-syntax">);
281             </span><span class="jsdoc-var">this.columnWidth  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth</span><span class="jsdoc-syntax">;
282             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">firstItem </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">firstItem.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'originalwidth'</span><span class="jsdoc-syntax">) ) {
283                 </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">= 1* (</span><span class="jsdoc-var">firstItem.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'originalwidth'</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">firstItem.getWidth</span><span class="jsdoc-syntax">());
284             }
285             </span><span class="jsdoc-comment">// columnWidth fall back to item of first element
286             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;set column width?&quot;</span><span class="jsdoc-syntax">);
287                         </span><span class="jsdoc-var">this.initialColumnWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.columnWidth  </span><span class="jsdoc-syntax">;
288
289             </span><span class="jsdoc-comment">// if first elem has no width, default to size of container
290             
291         </span><span class="jsdoc-syntax">}
292         
293         
294         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.initialColumnWidth</span><span class="jsdoc-syntax">) {
295             </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.initialColumnWidth</span><span class="jsdoc-syntax">;
296         }
297         
298         
299             
300         </span><span class="jsdoc-comment">// column width is fixed at the top - however if container width get's smaller we should
301         // reduce it...
302         
303         // this bit calcs how man columns..
304             
305         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">columnWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">;
306       
307         </span><span class="jsdoc-comment">// calculate columns
308         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">containerWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">;
309         
310         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">containerWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">) / (</span><span class="jsdoc-var">columnWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">);
311         </span><span class="jsdoc-comment">// fix rounding errors, typically with gutters
312         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">excess </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">columnWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">containerWidth </span><span class="jsdoc-syntax">% </span><span class="jsdoc-var">columnWidth</span><span class="jsdoc-syntax">;
313         
314         
315         </span><span class="jsdoc-comment">// if overshoot is less than a pixel, round up, otherwise floor it
316         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mathMethod </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">excess </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">excess </span><span class="jsdoc-syntax">&lt; 1 ? </span><span class="jsdoc-string">'round' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'floor'</span><span class="jsdoc-syntax">;
317         </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">[ </span><span class="jsdoc-var">mathMethod </span><span class="jsdoc-syntax">]( </span><span class="jsdoc-var">cols </span><span class="jsdoc-syntax">);
318         </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">cols</span><span class="jsdoc-syntax">, 1 );
319         
320         
321          </span><span class="jsdoc-comment">// padding positioning..
322         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalColWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.columnWidth</span><span class="jsdoc-syntax">;
323         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">padavail </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">totalColWidth</span><span class="jsdoc-syntax">;
324         </span><span class="jsdoc-comment">// so for 2 columns - we need 3 'pads'
325         
326         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">padNeeded </span><span class="jsdoc-syntax">= (1+</span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this.padWidth</span><span class="jsdoc-syntax">;
327         
328         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">padExtra </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">padavail </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">padNeeded</span><span class="jsdoc-syntax">) / </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">);
329         
330         </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">padExtra
331         </span><span class="jsdoc-comment">//this.padWidth = Math.floor(padavail /  ( this.cols));
332         
333         // adjust colum width so that padding is fixed??
334         
335         // we have 3 columns ... total = width * 3
336         // we have X left over... that should be used by 
337         
338         //if (this.expandC) {
339             
340         //}
341         
342         
343         
344     </span><span class="jsdoc-syntax">},
345     
346     </span><span class="jsdoc-var">getContainerWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
347     {
348        </span><span class="jsdoc-comment">/* // container is parent if fit width
349         var container = this.isFitWidth ? this.element.parentNode : this.element;
350         // check that this.size and size are there
351         // IE8 triggers resize on body size change, so they might not be
352         
353         var size = getSize( container );  //FIXME
354         this.containerWidth = size &amp;&amp; size.innerWidth; //FIXME
355         */
356          
357         </span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.width</span><span class="jsdoc-syntax">;  </span><span class="jsdoc-comment">//maybe use getComputedWidth
358         
359     </span><span class="jsdoc-syntax">},
360     
361     </span><span class="jsdoc-var">_getItemLayoutPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">)  </span><span class="jsdoc-comment">// what is item?
362     </span><span class="jsdoc-syntax">{
363         </span><span class="jsdoc-comment">// we resize the item to our columnWidth..
364       
365         </span><span class="jsdoc-var">item.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.columnWidth</span><span class="jsdoc-syntax">);
366         </span><span class="jsdoc-var">item.autoBoxAdjust  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
367         
368         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sz </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">item.getSize</span><span class="jsdoc-syntax">();
369  
370         </span><span class="jsdoc-comment">// how many columns does this brick span
371         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">remainder </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth </span><span class="jsdoc-syntax">% </span><span class="jsdoc-var">this.columnWidth</span><span class="jsdoc-syntax">;
372         
373         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mathMethod </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">remainder </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">remainder </span><span class="jsdoc-syntax">&lt; 1 ? </span><span class="jsdoc-string">'round' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ceil'</span><span class="jsdoc-syntax">;
374         </span><span class="jsdoc-comment">// round if off by 1 pixel, otherwise use ceil
375         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">[ </span><span class="jsdoc-var">mathMethod </span><span class="jsdoc-syntax">]( </span><span class="jsdoc-var">sz.width  </span><span class="jsdoc-syntax">/ </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">);
376         </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">);
377         
378         </span><span class="jsdoc-comment">// normally this should be '1' as we dont' currently allow multi width columns..
379         
380         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">colGroup </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getColGroup</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">);
381         </span><span class="jsdoc-comment">// get the minimum Y value from the columns
382         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">minimumY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min.apply</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">colGroup </span><span class="jsdoc-syntax">);
383         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">([ </span><span class="jsdoc-string">'setHeight'</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">minimumY</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sz.height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">setHeight </span><span class="jsdoc-syntax">]);
384         
385         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">shortColIndex </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">colGroup.indexOf</span><span class="jsdoc-syntax">(  </span><span class="jsdoc-var">minimumY </span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// broken on ie8..?? probably...
386          
387         // position the brick
388         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">= {
389             </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.currentSize.x </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.padWidth </span><span class="jsdoc-syntax">/2) + ((</span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padWidth </span><span class="jsdoc-syntax">)* </span><span class="jsdoc-var">shortColIndex</span><span class="jsdoc-syntax">),
390             </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.currentSize.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">minimumY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padHeight
391         </span><span class="jsdoc-syntax">};
392         
393         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
394         </span><span class="jsdoc-comment">// apply setHeight to necessary columns
395         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">setHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">minimumY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">sz.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.padHeight</span><span class="jsdoc-syntax">;
396         </span><span class="jsdoc-comment">//Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);
397         
398         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">setSpan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">+ 1 - </span><span class="jsdoc-var">colGroup.length</span><span class="jsdoc-syntax">;
399         </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">setSpan</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++ ) {
400           </span><span class="jsdoc-var">this.colYs</span><span class="jsdoc-syntax">[ </span><span class="jsdoc-var">shortColIndex </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">setHeight </span><span class="jsdoc-syntax">;
401         }
402       
403         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">;
404     },
405     
406     </span><span class="jsdoc-comment">/**
407      * @param {Number} colSpan - number of columns the element spans
408      * @returns {Array} colGroup
409      */
410     </span><span class="jsdoc-var">_getColGroup </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">)
411     {
412         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">&lt; 2 ) {
413           </span><span class="jsdoc-comment">// if brick spans only one column, use all the column Ys
414           </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.colYs</span><span class="jsdoc-syntax">;
415         }
416       
417         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">colGroup </span><span class="jsdoc-syntax">= [];
418         </span><span class="jsdoc-comment">// how many different places could this brick fit horizontally
419         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">groupCount </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">+ 1 - </span><span class="jsdoc-var">colSpan</span><span class="jsdoc-syntax">;
420         </span><span class="jsdoc-comment">// for each group potential horizontal position
421         </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">groupCount</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++ ) {
422           </span><span class="jsdoc-comment">// make an array of colY values for that one group
423           </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">groupColYs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.colYs.slice</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">);
424           </span><span class="jsdoc-comment">// and get the max value of the array
425           </span><span class="jsdoc-var">colGroup</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">Math.max.apply</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">groupColYs </span><span class="jsdoc-syntax">);
426         }
427         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">colGroup</span><span class="jsdoc-syntax">;
428     },
429     </span><span class="jsdoc-comment">/*
430     _manageStamp : function( stamp )
431     {
432         var stampSize =  stamp.getSize();
433         var offset = stamp.getBox();
434         // get the columns that this stamp affects
435         var firstX = this.isOriginLeft ? offset.x : offset.right;
436         var lastX = firstX + stampSize.width;
437         var firstCol = Math.floor( firstX / this.columnWidth );
438         firstCol = Math.max( 0, firstCol );
439         
440         var lastCol = Math.floor( lastX / this.columnWidth );
441         // lastCol should not go over if multiple of columnWidth #425
442         lastCol -= lastX % this.columnWidth ? 0 : 1;
443         lastCol = Math.min( this.cols - 1, lastCol );
444         
445         // set colYs to bottom of the stamp
446         var stampMaxY = ( this.isOriginTop ? offset.y : offset.bottom ) +
447             stampSize.height;
448             
449         for ( var i = firstCol; i &lt;= lastCol; i++ ) {
450           this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
451         }
452     },
453     */
454     
455     </span><span class="jsdoc-var">_getContainerSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
456     {
457         </span><span class="jsdoc-var">this.maxY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max.apply</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">Math</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.colYs </span><span class="jsdoc-syntax">);
458         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= {
459             </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.maxY
460         </span><span class="jsdoc-syntax">};
461       
462         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.isFitWidth </span><span class="jsdoc-syntax">) {
463             </span><span class="jsdoc-var">size.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getContainerFitWidth</span><span class="jsdoc-syntax">();
464         }
465       
466         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">;
467     },
468     
469     </span><span class="jsdoc-var">_getContainerFitWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
470     {
471         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">unusedCols </span><span class="jsdoc-syntax">= 0;
472         </span><span class="jsdoc-comment">// count unused columns
473         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cols</span><span class="jsdoc-syntax">;
474         </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">( --</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">) {
475           </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.colYs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] !== 0 ) {
476             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
477           }
478           </span><span class="jsdoc-var">unusedCols</span><span class="jsdoc-syntax">++;
479         }
480         </span><span class="jsdoc-comment">// fit container to columns that have been used
481         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.cols </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">unusedCols </span><span class="jsdoc-syntax">) * </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.gutter</span><span class="jsdoc-syntax">;
482     },
483     
484     </span><span class="jsdoc-var">needsResizeLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
485     {
486         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">previousWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth</span><span class="jsdoc-syntax">;
487         </span><span class="jsdoc-var">this.getContainerWidth</span><span class="jsdoc-syntax">();
488         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">previousWidth </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">this.containerWidth</span><span class="jsdoc-syntax">;
489     }
490  
491 });
492
493  
494
495  </span></code></body></html>
RooJS - Version 1