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

   1 <html><head><title>../roojs1/Roo/bootstrap/LayoutMasonry.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.LayoutMasonry
  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.LayoutMasonry </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.LayoutMasonry.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.LayoutMasonry</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
  97         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
  98     },
  99
 100     </span><span class="jsdoc-var">getChildContainer</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">( )
 101     {
 102         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.boxesEl</span><span class="jsdoc-syntax">) {
 103             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.boxesEl</span><span class="jsdoc-syntax">;
 104         }
 105
 106         </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">();
 107
 108         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.boxesEl</span><span class="jsdoc-syntax">;
 109     },
 110
 111
 112     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 113     {
 114         </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">;
 115
 116         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isAutoInitial</span><span class="jsdoc-syntax">){
 117             </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">);
 118             </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">() {
 119                 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'children rendered'</span><span class="jsdoc-syntax">);
 120                 </span><span class="jsdoc-var">_this.initial</span><span class="jsdoc-syntax">();
 121             } ,</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 122         }
 123
 124     },
 125
 126     </span><span class="jsdoc-var">initial </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 127     {
 128         </span><span class="jsdoc-var">this.reloadItems</span><span class="jsdoc-syntax">();
 129
 130         </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">);
 131
 132         </span><span class="jsdoc-comment">/// was window resize... - let's see if this works..
 133         </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">);
 134
 135         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isAutoInitial</span><span class="jsdoc-syntax">){
 136             </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
 137             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 138         }
 139
 140         </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">);
 141     },
 142
 143     </span><span class="jsdoc-var">reloadItems</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 144     {
 145         </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">);
 146
 147         </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">) {
 148             </span><span class="jsdoc-comment">//Roo.log(b.getSize());
 149             </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">)) {
 150                 </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">);
 151             }
 152
 153         });
 154
 155         </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">);
 156     },
 157
 158     </span><span class="jsdoc-var">resize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 159     {
 160         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">);
 161         </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">);
 162
 163         </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">) {
 164             </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">);
 165             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 166         }
 167         </span><span class="jsdoc-var">this.currentSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">;
 168         </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
 169     },
 170
 171     </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 172     {
 173          </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'layout'</span><span class="jsdoc-syntax">);
 174         </span><span class="jsdoc-var">this._resetLayout</span><span class="jsdoc-syntax">();
 175         </span><span class="jsdoc-comment">//this._manageStamps();
 176
 177         // don't animate first layout
 178         </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">;
 179         </span><span class="jsdoc-var">this.layoutItems</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">isInstant </span><span class="jsdoc-syntax">);
 180
 181         </span><span class="jsdoc-comment">// flag for initalized
 182         </span><span class="jsdoc-var">this._isLayoutInited </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 183     },
 184
 185     </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">)
 186     {
 187         </span><span class="jsdoc-comment">//var items = this._getItemsForLayout( this.items );
 188         // original code supports filtering layout items.. we just ignore it..
 189
 190         </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">);
 191
 192         </span><span class="jsdoc-var">this._postLayout</span><span class="jsdoc-syntax">();
 193     },
 194     </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">)
 195     {
 196        </span><span class="jsdoc-comment">//this.fireEvent( 'layout', this, items );
 197
 198
 199         </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">) {
 200           </span><span class="jsdoc-comment">// no items, emit event with empty array
 201             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 202         }
 203
 204         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">queue </span><span class="jsdoc-syntax">= [];
 205         </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">) {
 206             </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">);
 207             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
 208             </span><span class="jsdoc-comment">// get x/y object from method
 209             </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">);
 210             </span><span class="jsdoc-comment">// enqueue
 211             </span><span class="jsdoc-var">position.item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
 212             </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...
 213             </span><span class="jsdoc-var">queue.push</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">);
 214         }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 215
 216         </span><span class="jsdoc-var">this._processLayoutQueue</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">queue </span><span class="jsdoc-syntax">);
 217     },
 218     </span><span class="jsdoc-comment">/** Sets position of item in DOM
 219     * @param {Element} item
 220     * @param {Number} x - horizontal position
 221     * @param {Number} y - vertical position
 222     * @param {Boolean} isInstant - disables transitions
 223     */
 224     </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">)
 225     {
 226         </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">++ ) {
 227             </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">];
 228             </span><span class="jsdoc-var">obj.item.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'absolute'</span><span class="jsdoc-syntax">);
 229             </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">);
 230         }
 231     },
 232
 233
 234     </span><span class="jsdoc-comment">/**
 235     * Any logic you want to do after each layout,
 236     * i.e. size the container
 237     */
 238     </span><span class="jsdoc-var">_postLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 239     {
 240         </span><span class="jsdoc-var">this.resizeContainer</span><span class="jsdoc-syntax">();
 241     },
 242
 243     </span><span class="jsdoc-var">resizeContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 244     {
 245         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( !</span><span class="jsdoc-var">this.isResizingContainer </span><span class="jsdoc-syntax">) {
 246             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 247         }
 248         </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">();
 249         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">) {
 250             </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">);
 251             </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">);
 252         }
 253     },
 254
 255
 256
 257     </span><span class="jsdoc-var">_resetLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 258     {
 259         </span><span class="jsdoc-comment">//this.getSize();  // -- does not really do anything.. it probably applies left/right etc. to obuject but not used
 260         </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">();
 261         </span><span class="jsdoc-comment">//this.gutter = this.el.getWidth();
 262
 263         </span><span class="jsdoc-var">this.measureColumns</span><span class="jsdoc-syntax">();
 264
 265         </span><span class="jsdoc-comment">// reset column Y
 266         </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">;
 267         </span><span class="jsdoc-var">this.colYs </span><span class="jsdoc-syntax">= [];
 268         </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">--) {
 269             </span><span class="jsdoc-var">this.colYs.push</span><span class="jsdoc-syntax">( 0 );
 270         }
 271
 272         </span><span class="jsdoc-var">this.maxY </span><span class="jsdoc-syntax">= 0;
 273     },
 274
 275     </span><span class="jsdoc-var">measureColumns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 276     {
 277         </span><span class="jsdoc-var">this.getContainerWidth</span><span class="jsdoc-syntax">();
 278       </span><span class="jsdoc-comment">// if columnWidth is 0, default to outerWidth of first item
 279         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( !</span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">) {
 280             </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">();
 281             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">firstItem</span><span class="jsdoc-syntax">);
 282             </span><span class="jsdoc-var">this.columnWidth  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.containerWidth</span><span class="jsdoc-syntax">;
 283             </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">) ) {
 284                 </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">());
 285             }
 286             </span><span class="jsdoc-comment">// columnWidth fall back to item of first element
 287             </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">);
 288                         </span><span class="jsdoc-var">this.initialColumnWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.columnWidth  </span><span class="jsdoc-syntax">;
 289
 290             </span><span class="jsdoc-comment">// if first elem has no width, default to size of container
 291
 292         </span><span class="jsdoc-syntax">}
 293
 294
 295         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.initialColumnWidth</span><span class="jsdoc-syntax">) {
 296             </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.initialColumnWidth</span><span class="jsdoc-syntax">;
 297         }
 298
 299
 300
 301         </span><span class="jsdoc-comment">// column width is fixed at the top - however if container width get's smaller we should
 302         // reduce it...
 303
 304         // this bit calcs how man columns..
 305
 306         </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">;
 307
 308         </span><span class="jsdoc-comment">// calculate columns
 309         </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">;
 310
 311         </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">);
 312         </span><span class="jsdoc-comment">// fix rounding errors, typically with gutters
 313         </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">;
 314
 315
 316         </span><span class="jsdoc-comment">// if overshoot is less than a pixel, round up, otherwise floor it
 317         </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">;
 318         </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">);
 319         </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 );
 320
 321
 322          </span><span class="jsdoc-comment">// padding positioning..
 323         </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">;
 324         </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">;
 325         </span><span class="jsdoc-comment">// so for 2 columns - we need 3 'pads'
 326
 327         </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">;
 328
 329         </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">);
 330
 331         </span><span class="jsdoc-var">this.columnWidth </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">padExtra
 332         </span><span class="jsdoc-comment">//this.padWidth = Math.floor(padavail /  ( this.cols));
 333
 334         // adjust colum width so that padding is fixed??
 335
 336         // we have 3 columns ... total = width * 3
 337         // we have X left over... that should be used by
 338
 339         //if (this.expandC) {
 340
 341         //}
 342
 343
 344
 345     </span><span class="jsdoc-syntax">},
 346
 347     </span><span class="jsdoc-var">getContainerWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 348     {
 349        </span><span class="jsdoc-comment">/* // container is parent if fit width
 350         var container = this.isFitWidth ? this.element.parentNode : this.element;
 351         // check that this.size and size are there
 352         // IE8 triggers resize on body size change, so they might not be
 353
 354         var size = getSize( container );  //FIXME
 355         this.containerWidth = size &amp;&amp; size.innerWidth; //FIXME
 356         */
 357
 358         </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
 359
 360     </span><span class="jsdoc-syntax">},
 361
 362     </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?
 363     </span><span class="jsdoc-syntax">{
 364         </span><span class="jsdoc-comment">// we resize the item to our columnWidth..
 365
 366         </span><span class="jsdoc-var">item.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.columnWidth</span><span class="jsdoc-syntax">);
 367         </span><span class="jsdoc-var">item.autoBoxAdjust  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 368
 369         </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">();
 370
 371         </span><span class="jsdoc-comment">// how many columns does this brick span
 372         </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">;
 373
 374         </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">;
 375         </span><span class="jsdoc-comment">// round if off by 1 pixel, otherwise use ceil
 376         </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">);
 377         </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">);
 378
 379         </span><span class="jsdoc-comment">// normally this should be '1' as we dont' currently allow multi width columns..
 380
 381         </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">);
 382         </span><span class="jsdoc-comment">// get the minimum Y value from the columns
 383         </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">);
 384         </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">]);
 385
 386         </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...
 387
 388         // position the brick
 389         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">position </span><span class="jsdoc-syntax">= {
 390             </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">),
 391             </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
 392         </span><span class="jsdoc-syntax">};
 393
 394         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
 395         </span><span class="jsdoc-comment">// apply setHeight to necessary columns
 396         </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">;
 397         </span><span class="jsdoc-comment">//Roo.log([ 'setHeight',  minimumY, sz.height, setHeight ]);
 398
 399         </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">;
 400         </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">++ ) {
 401           </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">;
 402         }
 403
 404         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">;
 405     },
 406
 407     </span><span class="jsdoc-comment">/**
 408      * @param {Number} colSpan - number of columns the element spans
 409      * @returns {Array} colGroup
 410      */
 411     </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">)
 412     {
 413         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">colSpan </span><span class="jsdoc-syntax">&lt; 2 ) {
 414           </span><span class="jsdoc-comment">// if brick spans only one column, use all the column Ys
 415           </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.colYs</span><span class="jsdoc-syntax">;
 416         }
 417
 418         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">colGroup </span><span class="jsdoc-syntax">= [];
 419         </span><span class="jsdoc-comment">// how many different places could this brick fit horizontally
 420         </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">;
 421         </span><span class="jsdoc-comment">// for each group potential horizontal position
 422         </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">++ ) {
 423           </span><span class="jsdoc-comment">// make an array of colY values for that one group
 424           </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">);
 425           </span><span class="jsdoc-comment">// and get the max value of the array
 426           </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">);
 427         }
 428         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">colGroup</span><span class="jsdoc-syntax">;
 429     },
 430     </span><span class="jsdoc-comment">/*
 431     _manageStamp : function( stamp )
 432     {
 433         var stampSize =  stamp.getSize();
 434         var offset = stamp.getBox();
 435         // get the columns that this stamp affects
 436         var firstX = this.isOriginLeft ? offset.x : offset.right;
 437         var lastX = firstX + stampSize.width;
 438         var firstCol = Math.floor( firstX / this.columnWidth );
 439         firstCol = Math.max( 0, firstCol );
 440
 441         var lastCol = Math.floor( lastX / this.columnWidth );
 442         // lastCol should not go over if multiple of columnWidth #425
 443         lastCol -= lastX % this.columnWidth ? 0 : 1;
 444         lastCol = Math.min( this.cols - 1, lastCol );
 445
 446         // set colYs to bottom of the stamp
 447         var stampMaxY = ( this.isOriginTop ? offset.y : offset.bottom ) +
 448             stampSize.height;
 449
 450         for ( var i = firstCol; i &lt;= lastCol; i++ ) {
 451           this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
 452         }
 453     },
 454     */
 455
 456     </span><span class="jsdoc-var">_getContainerSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 457     {
 458         </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">);
 459         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= {
 460             </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.maxY
 461         </span><span class="jsdoc-syntax">};
 462
 463         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.isFitWidth </span><span class="jsdoc-syntax">) {
 464             </span><span class="jsdoc-var">size.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this._getContainerFitWidth</span><span class="jsdoc-syntax">();
 465         }
 466
 467         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">;
 468     },
 469
 470     </span><span class="jsdoc-var">_getContainerFitWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 471     {
 472         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">unusedCols </span><span class="jsdoc-syntax">= 0;
 473         </span><span class="jsdoc-comment">// count unused columns
 474         </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">;
 475         </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">( --</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">) {
 476           </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 ) {
 477             </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 478           }
 479           </span><span class="jsdoc-var">unusedCols</span><span class="jsdoc-syntax">++;
 480         }
 481         </span><span class="jsdoc-comment">// fit container to columns that have been used
 482         </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">;
 483     },
 484
 485     </span><span class="jsdoc-var">needsResizeLayout </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 486     {
 487         </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">;
 488         </span><span class="jsdoc-var">this.getContainerWidth</span><span class="jsdoc-syntax">();
 489         </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">;
 490     }
 491
 492 });
 493
 494
 495
 496  </span></code></body></html>