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

   1 <html><head><title>Roo/bootstrap/layout/Manager.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  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11
  12 /**
  13  * @class Roo.bootstrap.layout.Manager
  14  * @extends Roo.bootstrap.Component
  15  * Base class for layout managers.
  16  */
  17 </span><span class="jsdoc-var">Roo.bootstrap.layout.Manager </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">)
  18 {
  19     </span><span class="jsdoc-var">Roo.bootstrap.layout.Manager.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">);
  20
  21
  22
  23
  24
  25     </span><span class="jsdoc-comment">/** false to disable window resize monitoring @type Boolean */
  26     </span><span class="jsdoc-var">this.monitorWindowResize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
  27     </span><span class="jsdoc-var">this.regions </span><span class="jsdoc-syntax">= {};
  28     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  29         </span><span class="jsdoc-comment">/**
  30          * @event layout
  31          * Fires when a layout is performed.
  32          * @param {Roo.LayoutManager} this
  33          */
  34         </span><span class="jsdoc-string">&quot;layout&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  35         </span><span class="jsdoc-comment">/**
  36          * @event regionresized
  37          * Fires when the user resizes a region.
  38          * @param {Roo.LayoutRegion} region The resized region
  39          * @param {Number} newSize The new size (width for east/west, height for north/south)
  40          */
  41         </span><span class="jsdoc-string">&quot;regionresized&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  42         </span><span class="jsdoc-comment">/**
  43          * @event regioncollapsed
  44          * Fires when a region is collapsed.
  45          * @param {Roo.LayoutRegion} region The collapsed region
  46          */
  47         </span><span class="jsdoc-string">&quot;regioncollapsed&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  48         </span><span class="jsdoc-comment">/**
  49          * @event regionexpanded
  50          * Fires when a region is expanded.
  51          * @param {Roo.LayoutRegion} region The expanded region
  52          */
  53         </span><span class="jsdoc-string">&quot;regionexpanded&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  54     </span><span class="jsdoc-syntax">});
  55     </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
  56
  57     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.el</span><span class="jsdoc-syntax">) {
  58         </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.el</span><span class="jsdoc-syntax">);
  59         </span><span class="jsdoc-var">this.initEvents</span><span class="jsdoc-syntax">();
  60     }
  61
  62 };
  63
  64 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.layout.Manager</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">, {
  65
  66
  67     </span><span class="jsdoc-var">regions </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
  68
  69     </span><span class="jsdoc-var">monitorWindowResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  70
  71
  72     </span><span class="jsdoc-var">updating </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  73
  74
  75     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">)
  76     {
  77         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
  78             </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">);
  79             </span><span class="jsdoc-var">this.initEvents</span><span class="jsdoc-syntax">();
  80         }
  81         </span><span class="jsdoc-comment">//this.fireEvent('render',this);
  82     </span><span class="jsdoc-syntax">},
  83
  84
  85     </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  86     {
  87
  88
  89         </span><span class="jsdoc-comment">// ie scrollbar fix
  90         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">document.body </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">config.allowScroll</span><span class="jsdoc-syntax">){
  91             </span><span class="jsdoc-var">document.body.scroll </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;no&quot;</span><span class="jsdoc-syntax">;
  92         }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">document.body </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.el.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'position'</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'static'</span><span class="jsdoc-syntax">){
  93             </span><span class="jsdoc-var">this.el.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'relative'</span><span class="jsdoc-syntax">);
  94         }
  95         </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.id</span><span class="jsdoc-syntax">;
  96         </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;roo-layout-container&quot;</span><span class="jsdoc-syntax">);
  97         </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.onWindowResize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  98         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">document.body </span><span class="jsdoc-syntax">) {
  99             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 100             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 101         }
 102
 103     },
 104
 105     </span><span class="jsdoc-comment">/**
 106      * Returns true if this layout is currently being updated
 107      * @return {Boolean}
 108      */
 109     </span><span class="jsdoc-var">isUpdating </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 110         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.updating</span><span class="jsdoc-syntax">;
 111     },
 112
 113     </span><span class="jsdoc-comment">/**
 114      * Suspend the LayoutManager from doing auto-layouts while
 115      * making multiple add or remove calls
 116      */
 117     </span><span class="jsdoc-var">beginUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 118         </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 119     },
 120
 121     </span><span class="jsdoc-comment">/**
 122      * Restore auto-layouts and optionally disable the manager from performing a layout
 123      * @param {Boolean} noLayout true to disable a layout update
 124      */
 125     </span><span class="jsdoc-var">endUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">noLayout</span><span class="jsdoc-syntax">){
 126         </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 127         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">noLayout</span><span class="jsdoc-syntax">){
 128             </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
 129         }
 130     },
 131
 132     </span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 133         </span><span class="jsdoc-comment">// abstract...
 134     </span><span class="jsdoc-syntax">},
 135
 136     </span><span class="jsdoc-var">onRegionResized </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">newSize</span><span class="jsdoc-syntax">){
 137         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;regionresized&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">newSize</span><span class="jsdoc-syntax">);
 138         </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
 139     },
 140
 141     </span><span class="jsdoc-var">onRegionCollapsed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">){
 142         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;regioncollapsed&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">);
 143     },
 144
 145     </span><span class="jsdoc-var">onRegionExpanded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">){
 146         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;regionexpanded&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">);
 147     },
 148
 149     </span><span class="jsdoc-comment">/**
 150      * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
 151      * performs box-model adjustments.
 152      * @return {Object} The size as an object {width: (the width), height: (the height)}
 153      */
 154     </span><span class="jsdoc-var">getViewSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 155     {
 156         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">;
 157         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">){
 158             </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
 159         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 160             </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">()};
 161         }
 162         </span><span class="jsdoc-var">size.width </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">this.el.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">)-</span><span class="jsdoc-var">this.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;lr&quot;</span><span class="jsdoc-syntax">);
 163         </span><span class="jsdoc-var">size.height </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">this.el.getBorderWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">)-</span><span class="jsdoc-var">this.el.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tb&quot;</span><span class="jsdoc-syntax">);
 164         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">;
 165     },
 166
 167     </span><span class="jsdoc-comment">/**
 168      * Returns the Element this layout is bound to.
 169      * @return {Roo.Element}
 170      */
 171     </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 172         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
 173     },
 174
 175     </span><span class="jsdoc-comment">/**
 176      * Returns the specified region.
 177      * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
 178      * @return {Roo.LayoutRegion}
 179      */
 180     </span><span class="jsdoc-var">getRegion </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">){
 181         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target.toLowerCase</span><span class="jsdoc-syntax">()];
 182     },
 183
 184     </span><span class="jsdoc-var">onWindowResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 185         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.monitorWindowResize</span><span class="jsdoc-syntax">){
 186             </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
 187         }
 188     }
 189 });
 190 </span></code></body></html>