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">
13 * @class Roo.bootstrap.layout.Basic
14 * @extends Roo.util.Observable
15 * This class represents a lightweight region in a layout manager. This region does not move dom nodes
16 * and does not have a titlebar, tabs or any other features. All it does is size and position
17 * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
18 * @cfg {Roo.bootstrap.layout.Manager} mgr The manager
19 * @cfg {string} region the region that it inhabits..
20 * @cfg {bool} skipConfig skip config?
24 Roo.bootstrap.layout.Basic = function(config){
26 this.mgr = config.mgr;
28 this.position = config.region;
30 var skipConfig = config.skipConfig;
34 * @scope Roo.layout.BasicRegion
39 * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
40 * @param {Roo.layout.Region} this
41 * @param {Roo.ContentPanel} panel The panel
42 * @param {Object} e The cancel event object
44 "beforeremove" : true,
47 * Fires when the layout for this region is changed.
48 * @param {Roo.layout.Region} this
52 * @event visibilitychange
53 * Fires when this region is shown or hidden
54 * @param {Roo.layout.Region} this
55 * @param {Boolean} visibility true or false
57 "visibilitychange" : true,
60 * Fires when a panel is added.
61 * @param {Roo.layout.Region} this
62 * @param {Roo.ContentPanel} panel The panel
67 * Fires when a panel is removed.
68 * @param {Roo.layout.Region} this
69 * @param {Roo.ContentPanel} panel The panel
71 "panelremoved" : true,
73 * @event beforecollapse
74 * Fires when this region before collapse.
75 * @param {Roo.layout.Region} this
77 "beforecollapse" : true,
80 * Fires when this region is collapsed.
81 * @param {Roo.layout.Region} this
86 * Fires when this region is expanded.
87 * @param {Roo.layout.Region} this
92 * Fires when this region is slid into view.
93 * @param {Roo.layout.Region} this
98 * Fires when this region slides out of view.
99 * @param {Roo.layout.Region} this
103 * @event panelactivated
104 * Fires when a panel is activated.
105 * @param {Roo.layout.Region} this
106 * @param {Roo.ContentPanel} panel The activated panel
108 "panelactivated" : true,
111 * Fires when the user resizes this region.
112 * @param {Roo.layout.Region} this
113 * @param {Number} newSize The new size (width for east/west, height for north/south)
117 /** A collection of panels in this region. @type Roo.util.MixedCollection */
118 this.panels = new Roo.util.MixedCollection();
119 this.panels.getKey = this.getPanelId.createDelegate(this);
121 this.activePanel = null;
122 // ensure listeners are added...
124 if (config.listeners || config.events) {
125 Roo.bootstrap.layout.Basic.superclass.constructor.call(this, {
126 listeners : config.listeners || {},
127 events : config.events || {}
131 if(skipConfig !== true){
132 this.applyConfig(config);
136 Roo.extend(Roo.bootstrap.layout.Basic, Roo.util.Observable,
138 getPanelId : function(p){
142 applyConfig : function(config){
143 this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
144 this.config = config;
149 * Resizes the region to the specified size. For vertical regions (west, east) this adjusts
150 * the width, for horizontal (north, south) the height.
151 * @param {Number} newSize The new width or height
153 resizeTo : function(newSize){
154 var el = this.el ? this.el :
155 (this.activePanel ? this.activePanel.getEl() : null);
157 switch(this.position){
160 el.setWidth(newSize);
161 this.fireEvent("resized", this, newSize);
165 el.setHeight(newSize);
166 this.fireEvent("resized", this, newSize);
173 return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
176 getMargins : function(){
180 updateBox : function(box){
182 var el = this.activePanel.getEl();
183 el.dom.style.left = box.x + "px";
184 el.dom.style.top = box.y + "px";
185 this.activePanel.setSize(box.width, box.height);
189 * Returns the container element for this region.
190 * @return {Roo.Element}
193 return this.activePanel;
197 * Returns true if this region is currently visible.
200 isVisible : function(){
201 return this.activePanel ? true : false;
204 setActivePanel : function(panel){
205 panel = this.getPanel(panel);
206 if(this.activePanel && this.activePanel != panel){
207 this.activePanel.setActiveState(false);
208 this.activePanel.getEl().setLeftTop(-10000,-10000);
210 this.activePanel = panel;
211 panel.setActiveState(true);
213 panel.setSize(this.box.width, this.box.height);
215 this.fireEvent("panelactivated", this, panel);
216 this.fireEvent("invalidated");
220 * Show the specified panel.
221 * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
222 * @return {Roo.ContentPanel} The shown panel or null
224 showPanel : function(panel){
225 panel = this.getPanel(panel);
227 this.setActivePanel(panel);
233 * Get the active panel for this region.
234 * @return {Roo.ContentPanel} The active panel or null
236 getActivePanel : function(){
237 return this.activePanel;
241 * Add the passed ContentPanel(s)
242 * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
243 * @return {Roo.ContentPanel} The panel added (if only one was added)
245 add : function(panel){
246 if(arguments.length > 1){
247 for(var i = 0, len = arguments.length; i < len; i++) {
248 this.add(arguments[i]);
252 if(this.hasPanel(panel)){
253 this.showPanel(panel);
256 var el = panel.getEl();
257 if(el.dom.parentNode != this.mgr.el.dom){
258 this.mgr.el.dom.appendChild(el.dom);
261 panel.setRegion(this);
263 this.panels.add(panel);
264 el.setStyle("position", "absolute");
265 if(!panel.background){
266 this.setActivePanel(panel);
267 if(this.config.initialSize && this.panels.getCount()==1){
268 this.resizeTo(this.config.initialSize);
271 this.fireEvent("paneladded", this, panel);
276 * Returns true if the panel is in this region.
277 * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
280 hasPanel : function(panel){
281 if(typeof panel == "object"){ // must be panel obj
282 panel = panel.getId();
284 return this.getPanel(panel) ? true : false;
288 * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
289 * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
290 * @param {Boolean} preservePanel Overrides the config preservePanel option
291 * @return {Roo.ContentPanel} The panel that was removed
293 remove : function(panel, preservePanel){
294 panel = this.getPanel(panel);
299 this.fireEvent("beforeremove", this, panel, e);
300 if(e.cancel === true){
303 var panelId = panel.getId();
304 this.panels.removeKey(panelId);
309 * Returns the panel specified or null if it's not in this region.
310 * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
311 * @return {Roo.ContentPanel}
313 getPanel : function(id){
314 if(typeof id == "object"){ // must be panel obj
317 return this.panels.get(id);
321 * Returns this regions position (north/south/east/west/center).
324 getPosition: function(){
325 return this.position;