1 <html><head><title>Roo/BorderLayout.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">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
12 * @class Roo.BorderLayout
13 * @extends Roo.LayoutManager
14 * @children Roo.ContentPanel
15 * This class represents a common layout manager used in desktop applications. For screenshots and more details,
16 * please see: <br><br>
17 * <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
18 * <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
20 <pre><code>
21 var layout = new Roo.BorderLayout(document.body, {
55 preferredTabWidth: 150
60 var CP = Roo.ContentPanel;
63 layout.add("north", new CP("north", "North"));
64 layout.add("south", new CP("south", {title: "South", closable: true}));
65 layout.add("west", new CP("west", {title: "West"}));
66 layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
67 layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
68 layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
69 layout.getRegion("center").showPanel("center1");
71 </code></pre>
73 <b>The container the layout is rendered into can be either the body element or any other element.
74 If it is not the body element, the container needs to either be an absolute positioned element,
75 or you will need to add "position:relative" to the css of the container. You will also need to specify
76 the container size if it is not the body element.</b>
79 * Create a new BorderLayout
80 * @param {String/HTMLElement/Element} container The container this layout is bound to
81 * @param {Object} config Configuration options
83 </span><span class="jsdoc-var">Roo.BorderLayout </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">){
84 </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| {};
85 </span><span class="jsdoc-var">Roo.BorderLayout.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</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">);
86 </span><span class="jsdoc-var">this.factory </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.factory </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.BorderLayout.RegionFactory</span><span class="jsdoc-syntax">;
87 </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">this.factory.validRegions.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
88 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.factory.validRegions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
89 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]){
90 </span><span class="jsdoc-var">this.addRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]);
95 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.BorderLayout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.LayoutManager</span><span class="jsdoc-syntax">, {
97 </span><span class="jsdoc-comment">/**
98 * @cfg {Roo.LayoutRegion} east
101 * @cfg {Roo.LayoutRegion} west
104 * @cfg {Roo.LayoutRegion} north
107 * @cfg {Roo.LayoutRegion} south
110 * @cfg {Roo.LayoutRegion} center
113 * Creates and adds a new region if it doesn't already exist.
114 * @param {String} target The target region key (north, south, east, west or center).
115 * @param {Object} config The regions config object
116 * @return {BorderLayoutRegion} The new region
118 </span><span class="jsdoc-var">addRegion </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">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
119 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]){
120 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.factory.create</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</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">);
121 </span><span class="jsdoc-var">this.bindRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">);
123 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">];
126 </span><span class="jsdoc-comment">// private (kinda)
127 </span><span class="jsdoc-var">bindRegion </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">){
128 </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
129 </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"visibilitychange"</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">);
130 </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"paneladded"</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">);
131 </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"panelremoved"</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">);
132 </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"invalidated"</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">);
133 </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"resized"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRegionResized</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
134 </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"collapsed"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRegionCollapsed</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
135 </span><span class="jsdoc-var">r.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"expanded"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onRegionExpanded</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
138 </span><span class="jsdoc-comment">/**
139 * Performs a layout update.
141 </span><span class="jsdoc-var">layout </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.updating</span><span class="jsdoc-syntax">) {
143 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
145 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getViewSize</span><span class="jsdoc-syntax">();
146 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">;
147 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">;
148 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerW </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
149 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
150 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">= 0;
151 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerX </span><span class="jsdoc-syntax">= 0;
152 </span><span class="jsdoc-comment">//var x = 0, y = 0;
154 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">;
155 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">north </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">"north"</span><span class="jsdoc-syntax">];
156 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">south </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">"south"</span><span class="jsdoc-syntax">];
157 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">west </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">"west"</span><span class="jsdoc-syntax">];
158 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">east </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">"east"</span><span class="jsdoc-syntax">];
159 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">center </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">"center"</span><span class="jsdoc-syntax">];
160 </span><span class="jsdoc-comment">//if(this.hideOnLayout){ // not supported anymore
161 //c.el.setStyle("display", "none");
163 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">north </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">north.isVisible</span><span class="jsdoc-syntax">()){
164 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">north.getBox</span><span class="jsdoc-syntax">();
165 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">north.getMargins</span><span class="jsdoc-syntax">();
166 </span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">);
167 </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">;
168 </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">;
169 </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">;
170 </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">centerY</span><span class="jsdoc-syntax">;
171 </span><span class="jsdoc-var">north.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">));
173 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">south </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">south.isVisible</span><span class="jsdoc-syntax">()){
174 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">south.getBox</span><span class="jsdoc-syntax">();
175 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">south.getMargins</span><span class="jsdoc-syntax">();
176 </span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">);
177 </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">;
178 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalHeight </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">);
179 </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">totalHeight </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">;
180 </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">totalHeight</span><span class="jsdoc-syntax">;
181 </span><span class="jsdoc-var">south.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">));
183 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">west </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">west.isVisible</span><span class="jsdoc-syntax">()){
184 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">west.getBox</span><span class="jsdoc-syntax">();
185 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">west.getMargins</span><span class="jsdoc-syntax">();
186 </span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">);
187 </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">;
188 </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">;
189 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.left </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">);
190 </span><span class="jsdoc-var">centerX </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">totalWidth</span><span class="jsdoc-syntax">;
191 </span><span class="jsdoc-var">centerW </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">totalWidth</span><span class="jsdoc-syntax">;
192 </span><span class="jsdoc-var">west.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">));
194 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">east </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">east.isVisible</span><span class="jsdoc-syntax">()){
195 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">east.getBox</span><span class="jsdoc-syntax">();
196 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">east.getMargins</span><span class="jsdoc-syntax">();
197 </span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">);
198 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.left </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">);
199 </span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">totalWidth </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">;
200 </span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">;
201 </span><span class="jsdoc-var">centerW </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">totalWidth</span><span class="jsdoc-syntax">;
202 </span><span class="jsdoc-var">east.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">));
204 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">center</span><span class="jsdoc-syntax">){
205 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">center.getMargins</span><span class="jsdoc-syntax">();
206 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">centerBox </span><span class="jsdoc-syntax">= {
207 </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">centerX </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">,
208 </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">centerY </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">,
209 </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">centerW </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.left</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.right</span><span class="jsdoc-syntax">),
210 </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">centerH </span><span class="jsdoc-syntax">- (</span><span class="jsdoc-var">m.top</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">m.bottom</span><span class="jsdoc-syntax">)
212 </span><span class="jsdoc-comment">//if(this.hideOnLayout){
213 //center.el.setStyle("display", "block");
215 </span><span class="jsdoc-var">center.updateBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.safeBox</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">centerBox</span><span class="jsdoc-syntax">));
217 </span><span class="jsdoc-var">this.el.repaint</span><span class="jsdoc-syntax">();
218 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"layout"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
221 </span><span class="jsdoc-comment">// private
222 </span><span class="jsdoc-var">safeBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">){
223 </span><span class="jsdoc-var">box.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">);
224 </span><span class="jsdoc-var">box.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
225 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">;
228 </span><span class="jsdoc-comment">/**
229 * Adds a ContentPanel (or subclass) to this layout.
230 * @param {String} target The target region key (north, south, east, west or center).
231 * @param {Roo.ContentPanel} panel The panel to add
232 * @return {Roo.ContentPanel} The added panel
234 </span><span class="jsdoc-var">add </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">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
236 </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.toLowerCase</span><span class="jsdoc-syntax">();
237 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
240 </span><span class="jsdoc-comment">/**
241 * Remove a ContentPanel (or subclass) to this layout.
242 * @param {String} target The target region key (north, south, east, west or center).
243 * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
244 * @return {Roo.ContentPanel} The removed panel
246 </span><span class="jsdoc-var">remove </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">, </span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">){
247 </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.toLowerCase</span><span class="jsdoc-syntax">();
248 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panel</span><span class="jsdoc-syntax">);
251 </span><span class="jsdoc-comment">/**
252 * Searches all regions for a panel with the specified id
253 * @param {String} panelId
254 * @return {Roo.ContentPanel} The panel or null if it wasn't found
256 </span><span class="jsdoc-var">findPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">){
257 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">;
258 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">){
259 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">] != </span><span class="jsdoc-string">"function"</span><span class="jsdoc-syntax">){
260 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.getPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">);
261 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">){
262 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">;
266 </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
269 </span><span class="jsdoc-comment">/**
270 * Searches all regions for a panel with the specified id and activates (shows) it.
271 * @param {String/ContentPanel} panelId The panels id or the panel itself
272 * @return {Roo.ContentPanel} The shown panel or null
274 </span><span class="jsdoc-var">showPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">) {
275 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">;
276 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">){
277 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">];
278 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">"function"</span><span class="jsdoc-syntax">){
279 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.hasPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">)){
280 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">panelId</span><span class="jsdoc-syntax">);
284 </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
287 </span><span class="jsdoc-comment">/**
288 * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
289 * @param {Roo.state.Provider} provider (optional) An alternate state provider
291 </span><span class="jsdoc-var">restoreState </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">provider</span><span class="jsdoc-syntax">){
292 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">provider</span><span class="jsdoc-syntax">){
293 </span><span class="jsdoc-var">provider </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.state.Manager</span><span class="jsdoc-syntax">;
295 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.LayoutStateManager</span><span class="jsdoc-syntax">();
296 </span><span class="jsdoc-var">sm.init</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">provider</span><span class="jsdoc-syntax">);
299 </span><span class="jsdoc-comment">/**
300 * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object. This config
301 * object should contain properties for each region to add ContentPanels to, and each property's value should be
302 * a valid ContentPanel config object. Example:
303 * <pre><code>
304 // Create the main layout
305 var layout = new Roo.BorderLayout('main-ct', {
316 // Create and add multiple ContentPanels at once via configs
321 title:'Ext Source Files',
333 </code></pre>
334 * @param {Object} regions An object containing ContentPanel configs by region name
336 </span><span class="jsdoc-var">batchAdd </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">regions</span><span class="jsdoc-syntax">){
337 </span><span class="jsdoc-var">this.beginUpdate</span><span class="jsdoc-syntax">();
338 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rname </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">regions</span><span class="jsdoc-syntax">){
339 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">rname</span><span class="jsdoc-syntax">];
340 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">){
341 </span><span class="jsdoc-var">this.addTypedPanels</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">rname</span><span class="jsdoc-syntax">]);
344 </span><span class="jsdoc-var">this.endUpdate</span><span class="jsdoc-syntax">();
347 </span><span class="jsdoc-comment">// private
348 </span><span class="jsdoc-var">addTypedPanels </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">){
349 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">ps </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">){
350 </span><span class="jsdoc-var">lr.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.ContentPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">));
352 </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ps </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
353 </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">ps.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
354 </span><span class="jsdoc-var">this.addTypedPanels</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
357 </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">ps.events</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// raw config?
358 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ps.el</span><span class="jsdoc-syntax">;
359 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">ps.el</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// prevent conflict
360 </span><span class="jsdoc-var">lr.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.ContentPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">));
362 </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{ </span><span class="jsdoc-comment">// panel object assumed!
363 </span><span class="jsdoc-var">lr.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">);
366 </span><span class="jsdoc-comment">/**
367 * Adds a xtype elements to the layout.
368 * <pre><code>
371 xtype : 'ContentPanel',
378 xtype : 'NestedLayoutPanel',
384 items : [ ... list of content panels or nested layout panels.. ]
387 </code></pre>
388 * @param {Object} cfg Xtype definition of item to add.
390 </span><span class="jsdoc-var">addxtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">)
392 </span><span class="jsdoc-comment">// basically accepts a pannel...
393 // can accept a layout region..!?!?
394 //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
396 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cfg.xtype.match</span><span class="jsdoc-syntax">(/Panel$/)) {
397 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
399 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
401 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.region</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
402 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"Failed to add Panel, region was not set"</span><span class="jsdoc-syntax">);
403 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">);
404 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
406 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.region</span><span class="jsdoc-syntax">;
407 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.region</span><span class="jsdoc-syntax">;
410 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= [];
411 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.items</span><span class="jsdoc-syntax">) {
412 </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.items</span><span class="jsdoc-syntax">;
413 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.items</span><span class="jsdoc-syntax">;
415 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
417 </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">)
419 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'ContentPanel'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-comment">// ContentPanel (el, cfg)
420 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'ScrollPanel'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-comment">// ContentPanel (el, cfg)
421 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'ViewPanel'</span><span class="jsdoc-syntax">:
422 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.autoCreate</span><span class="jsdoc-syntax">) {
423 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
424 </span><span class="jsdoc-syntax">} </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
425 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
426 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
427 </span><span class="jsdoc-syntax">}
429 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
430 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
433 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'TreePanel'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-comment">// our new panel!
434 </span><span class="jsdoc-var">cfg.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
435 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
436 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
437 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
439 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'NestedLayoutPanel'</span><span class="jsdoc-syntax">:
440 </span><span class="jsdoc-comment">// create a new Layout (which is a Border Layout...
441 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
442 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">clayout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.layout</span><span class="jsdoc-syntax">;
443 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.layout</span><span class="jsdoc-syntax">;
444 </span><span class="jsdoc-var">clayout.items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">clayout.items </span><span class="jsdoc-syntax">|| [];
445 </span><span class="jsdoc-comment">// replace this exitems with the clayout ones..
446 </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">clayout.items</span><span class="jsdoc-syntax">;
449 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.panels.length </span><span class="jsdoc-syntax">< 1) {
450 </span><span class="jsdoc-var">cfg.background </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
452 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.BorderLayout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">clayout</span><span class="jsdoc-syntax">);
454 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
455 //console.log('adding nested layout panel ' + cfg.toSource());
456 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
457 </span><span class="jsdoc-var">nb </span><span class="jsdoc-syntax">= {}; </span><span class="jsdoc-comment">/// find first...
458 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
460 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'GridPanel'</span><span class="jsdoc-syntax">:
462 </span><span class="jsdoc-comment">// needs grid and region
464 //var el = this.getRegion(region).el.createChild();
465 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.createChild</span><span class="jsdoc-syntax">();
466 </span><span class="jsdoc-comment">// create the grid first...
468 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">grid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.grid</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.grid.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg.grid</span><span class="jsdoc-syntax">);
469 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">cfg.grid</span><span class="jsdoc-syntax">;
470 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.active </span><span class="jsdoc-syntax">) {
471 </span><span class="jsdoc-var">cfg.background </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
473 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">grid</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
475 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
476 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.background</span><span class="jsdoc-syntax">) {
477 </span><span class="jsdoc-var">ret.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'activate'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">gp</span><span class="jsdoc-syntax">) {
478 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">gp.grid.rendered</span><span class="jsdoc-syntax">) {
479 </span><span class="jsdoc-var">gp.grid.render</span><span class="jsdoc-syntax">();
482 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
483 </span><span class="jsdoc-var">grid.render</span><span class="jsdoc-syntax">();
485 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
492 </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">:
493 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">]) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
495 </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.xtype</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// new panel!!!!!
496 </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">);
497 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
499 </span><span class="jsdoc-var">alert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"Can not add '" </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">cfg.xtype </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">"' to BorderLayout"</span><span class="jsdoc-syntax">);
500 </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
503 </span><span class="jsdoc-comment">// GridPanel (grid, cfg)
505 </span><span class="jsdoc-syntax">}
506 </span><span class="jsdoc-var">this.beginUpdate</span><span class="jsdoc-syntax">();
507 </span><span class="jsdoc-comment">// add children..
508 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
509 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">abn </span><span class="jsdoc-syntax">= {};
510 </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xitems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
511 </span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nb </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">i.region </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">i.region </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
513 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ret.addxtype</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
515 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">) {
516 </span><span class="jsdoc-var">nb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">nb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? 0 : </span><span class="jsdoc-var">nb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">]+1;
517 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">i.background</span><span class="jsdoc-syntax">) {
518 </span><span class="jsdoc-var">abn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">nb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">] ;
523 </span><span class="jsdoc-var">this.endUpdate</span><span class="jsdoc-syntax">();
525 </span><span class="jsdoc-comment">// make the last non-background panel active..
526 //if (nb) { Roo.log(abn); }
527 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nb</span><span class="jsdoc-syntax">) {
529 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">abn</span><span class="jsdoc-syntax">) {
530 </span><span class="jsdoc-var">region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">);
531 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">region</span><span class="jsdoc-syntax">) {
532 </span><span class="jsdoc-comment">// tried using nb[r], but it does not work..
534 </span><span class="jsdoc-var">region.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">abn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">]);
539 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
544 </span><span class="jsdoc-comment">/**
545 * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
546 * the beginUpdate and endUpdate calls internally. The key to this method is the <b>panels</b> property that can be
547 * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
548 * during creation. The following code is equivalent to the constructor-based example at the beginning of this class:
549 * <pre><code>
551 var CP = Roo.ContentPanel;
553 var layout = Roo.BorderLayout.create({
557 panels: [new CP("north", "North")]
566 panels: [new CP("west", {title: "West"})]
575 panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
584 panels: [new CP("south", {title: "South", closable: true})]
591 preferredTabWidth: 150,
593 new CP("center1", {title: "Close Me", closable: true}),
594 new CP("center2", {title: "Center Panel", closable: false})
599 layout.getRegion("center").showPanel("center1");
600 </code></pre>
604 </span><span class="jsdoc-var">Roo.BorderLayout.create </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">, </span><span class="jsdoc-var">targetEl</span><span class="jsdoc-syntax">){
605 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">layout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.BorderLayout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">targetEl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
606 </span><span class="jsdoc-var">layout.beginUpdate</span><span class="jsdoc-syntax">();
607 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">regions </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.BorderLayout.RegionFactory.validRegions</span><span class="jsdoc-syntax">;
608 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">jlen </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">regions.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">jlen</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">++){
609 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">];
610 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">layout.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">] && </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.panels</span><span class="jsdoc-syntax">){
611 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">layout.regions</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">];
612 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ps </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.panels</span><span class="jsdoc-syntax">;
613 </span><span class="jsdoc-var">layout.addTypedPanels</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ps</span><span class="jsdoc-syntax">);
616 </span><span class="jsdoc-var">layout.endUpdate</span><span class="jsdoc-syntax">();
617 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">layout</span><span class="jsdoc-syntax">;
620 </span><span class="jsdoc-comment">// private
621 </span><span class="jsdoc-var">Roo.BorderLayout.RegionFactory </span><span class="jsdoc-syntax">= {
622 </span><span class="jsdoc-comment">// private
623 </span><span class="jsdoc-var">validRegions </span><span class="jsdoc-syntax">: [</span><span class="jsdoc-string">"north"</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">"south"</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">"east"</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">"west"</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">"center"</span><span class="jsdoc-syntax">],
625 </span><span class="jsdoc-comment">// private
626 </span><span class="jsdoc-var">create </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">, </span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
627 </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.toLowerCase</span><span class="jsdoc-syntax">();
628 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config.lightweight </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.basic</span><span class="jsdoc-syntax">){
629 </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.BasicLayoutRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">);
631 </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">){
632 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"north"</span><span class="jsdoc-syntax">:
633 </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.NorthLayoutRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
634 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"south"</span><span class="jsdoc-syntax">:
635 </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.SouthLayoutRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
636 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"east"</span><span class="jsdoc-syntax">:
637 </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.EastLayoutRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
638 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"west"</span><span class="jsdoc-syntax">:
639 </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.WestLayoutRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
640 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"center"</span><span class="jsdoc-syntax">:
641 </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.CenterLayoutRegion</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mgr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
643 </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">'Layout region "'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'" not supported.'</span><span class="jsdoc-syntax">;
645 };</span></code></body></html>