projects / roojs1 / blob
? search:


09506ad3c1e6e97b05542b7ec33a40488620800d
[roojs1] / docs / src / Roo_LayoutManager.js.html
1 <html><head><title>/home/edward/gitlive/roojs1/Roo/LayoutManager.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.LayoutManager
14  * @extends Roo.util.Observable
15  * Base class for layout managers.
16  */
17 </span><span class="jsdoc-var">Roo.LayoutManager </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
18     </span><span class="jsdoc-var">Roo.LayoutManager.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
19     </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">container</span><span class="jsdoc-syntax">);
20     </span><span class="jsdoc-comment">// ie scrollbar fix
21     </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">){
22         </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">;
23     }</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">){
24         </span><span class="jsdoc-var">this.el.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'relative'</span><span class="jsdoc-syntax">);
25     }
26     </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">;
27     </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-layout-container&quot;</span><span class="jsdoc-syntax">);
28     </span><span class="jsdoc-comment">/** false to disable window resize monitoring @type Boolean */
29     </span><span class="jsdoc-var">this.monitorWindowResize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
30     </span><span class="jsdoc-var">this.regions </span><span class="jsdoc-syntax">= {};
31     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
32         </span><span class="jsdoc-comment">/**
33          * @event layout
34          * Fires when a layout is performed. 
35          * @param {Roo.LayoutManager} this
36          */
37         </span><span class="jsdoc-string">&quot;layout&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
38         </span><span class="jsdoc-comment">/**
39          * @event regionresized
40          * Fires when the user resizes a region. 
41          * @param {Roo.LayoutRegion} region The resized region
42          * @param {Number} newSize The new size (width for east/west, height for north/south)
43          */
44         </span><span class="jsdoc-string">&quot;regionresized&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
45         </span><span class="jsdoc-comment">/**
46          * @event regioncollapsed
47          * Fires when a region is collapsed. 
48          * @param {Roo.LayoutRegion} region The collapsed region
49          */
50         </span><span class="jsdoc-string">&quot;regioncollapsed&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
51         </span><span class="jsdoc-comment">/**
52          * @event regionexpanded
53          * Fires when a region is expanded.  
54          * @param {Roo.LayoutRegion} region The expanded region
55          */
56         </span><span class="jsdoc-string">&quot;regionexpanded&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
57     </span><span class="jsdoc-syntax">});
58     </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
59     </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">);
60 };
61
62 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.LayoutManager</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
63     </span><span class="jsdoc-comment">/**
64      * Returns true if this layout is currently being updated
65      * @return {Boolean}
66      */
67     </span><span class="jsdoc-var">isUpdating </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
68         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.updating</span><span class="jsdoc-syntax">;
69     },
70
71     </span><span class="jsdoc-comment">/**
72      * Suspend the LayoutManager from doing auto-layouts while
73      * making multiple add or remove calls
74      */
75     </span><span class="jsdoc-var">beginUpdate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
76         </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
77     },
78
79     </span><span class="jsdoc-comment">/**
80      * Restore auto-layouts and optionally disable the manager from performing a layout
81      * @param {Boolean} noLayout true to disable a layout update 
82      */
83     </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">){
84         </span><span class="jsdoc-var">this.updating </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
85         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">noLayout</span><span class="jsdoc-syntax">){
86             </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
87         }
88     },
89
90     </span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
91
92     },
93
94     </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">){
95         </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">);
96         </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
97     },
98
99     </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">){
100         </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">);
101     },
102
103     </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">){
104         </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">);
105     },
106
107     </span><span class="jsdoc-comment">/**
108      * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
109      * performs box-model adjustments.
110      * @return {Object} The size as an object {width: (the width), height: (the height)}
111      */
112     </span><span class="jsdoc-var">getViewSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
113         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">;
114         </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">){
115             </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
116         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
117             </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">()};
118         }
119         </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">);
120         </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">);
121         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">;
122     },
123
124     </span><span class="jsdoc-comment">/**
125      * Returns the Element this layout is bound to.
126      * @return {Roo.Element}
127      */
128     </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
129         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
130     },
131
132     </span><span class="jsdoc-comment">/**
133      * Returns the specified region.
134      * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
135      * @return {Roo.LayoutRegion}
136      */
137     </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">){
138         </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">()];
139     },
140
141     </span><span class="jsdoc-var">onWindowResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
142         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.monitorWindowResize</span><span class="jsdoc-syntax">){
143             </span><span class="jsdoc-var">this.layout</span><span class="jsdoc-syntax">();
144         }
145     }
146 });</span></code></body></html>
RooJS - Version 1