git.roojs.org Git - roojs1/blob - Roo/BasicLayoutRegion.js

   1 /*
   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  * <script type="text/javascript">
  10  */
  11
  12 /**
  13  * @class Roo.BasicLayoutRegion
  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  */
  19 Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
  20     this.mgr = mgr;
  21     this.position  = pos;
  22     this.events = {
  23         /**
  24          * @scope Roo.BasicLayoutRegion
  25          */
  26
  27         /**
  28          * @event beforeremove
  29          * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
  30          * @param {Roo.LayoutRegion} this
  31          * @param {Roo.ContentPanel} panel The panel
  32          * @param {Object} e The cancel event object
  33          */
  34         "beforeremove" : true,
  35         /**
  36          * @event invalidated
  37          * Fires when the layout for this region is changed.
  38          * @param {Roo.LayoutRegion} this
  39          */
  40         "invalidated" : true,
  41         /**
  42          * @event visibilitychange
  43          * Fires when this region is shown or hidden
  44          * @param {Roo.LayoutRegion} this
  45          * @param {Boolean} visibility true or false
  46          */
  47         "visibilitychange" : true,
  48         /**
  49          * @event paneladded
  50          * Fires when a panel is added.
  51          * @param {Roo.LayoutRegion} this
  52          * @param {Roo.ContentPanel} panel The panel
  53          */
  54         "paneladded" : true,
  55         /**
  56          * @event panelremoved
  57          * Fires when a panel is removed.
  58          * @param {Roo.LayoutRegion} this
  59          * @param {Roo.ContentPanel} panel The panel
  60          */
  61         "panelremoved" : true,
  62         /**
  63          * @event beforecollapse
  64          * Fires when this region before collapse.
  65          * @param {Roo.LayoutRegion} this
  66          */
  67         "beforecollapse" : true,
  68         /**
  69          * @event collapsed
  70          * Fires when this region is collapsed.
  71          * @param {Roo.LayoutRegion} this
  72          */
  73         "collapsed" : true,
  74         /**
  75          * @event expanded
  76          * Fires when this region is expanded.
  77          * @param {Roo.LayoutRegion} this
  78          */
  79         "expanded" : true,
  80         /**
  81          * @event slideshow
  82          * Fires when this region is slid into view.
  83          * @param {Roo.LayoutRegion} this
  84          */
  85         "slideshow" : true,
  86         /**
  87          * @event slidehide
  88          * Fires when this region slides out of view.
  89          * @param {Roo.LayoutRegion} this
  90          */
  91         "slidehide" : true,
  92         /**
  93          * @event panelactivated
  94          * Fires when a panel is activated.
  95          * @param {Roo.LayoutRegion} this
  96          * @param {Roo.ContentPanel} panel The activated panel
  97          */
  98         "panelactivated" : true,
  99         /**
 100          * @event resized
 101          * Fires when the user resizes this region.
 102          * @param {Roo.LayoutRegion} this
 103          * @param {Number} newSize The new size (width for east/west, height for north/south)
 104          */
 105         "resized" : true
 106     };
 107     /** A collection of panels in this region. @type Roo.util.MixedCollection */
 108     this.panels = new Roo.util.MixedCollection();
 109     this.panels.getKey = this.getPanelId.createDelegate(this);
 110     this.box = null;
 111     this.activePanel = null;
 112     // ensure listeners are added...
 113
 114     if (config.listeners || config.events) {
 115         Roo.BasicLayoutRegion.superclass.constructor.call(this, {
 116             listeners : config.listeners || {},
 117             events : config.events || {}
 118         });
 119     }
 120
 121     if(skipConfig !== true){
 122         this.applyConfig(config);
 123     }
 124 };
 125
 126 Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
 127     getPanelId : function(p){
 128         return p.getId();
 129     },
 130
 131     applyConfig : function(config){
 132         this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
 133         this.config = config;
 134
 135     },
 136
 137     /**
 138      * Resizes the region to the specified size. For vertical regions (west, east) this adjusts
 139      * the width, for horizontal (north, south) the height.
 140      * @param {Number} newSize The new width or height
 141      */
 142     resizeTo : function(newSize){
 143         var el = this.el ? this.el :
 144                  (this.activePanel ? this.activePanel.getEl() : null);
 145         if(el){
 146             switch(this.position){
 147                 case "east":
 148                 case "west":
 149                     el.setWidth(newSize);
 150                     this.fireEvent("resized", this, newSize);
 151                 break;
 152                 case "north":
 153                 case "south":
 154                     el.setHeight(newSize);
 155                     this.fireEvent("resized", this, newSize);
 156                 break;
 157             }
 158         }
 159     },
 160
 161     getBox : function(){
 162         return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
 163     },
 164
 165     getMargins : function(){
 166         return this.margins;
 167     },
 168
 169     updateBox : function(box){
 170         this.box = box;
 171         var el = this.activePanel.getEl();
 172         el.dom.style.left = box.x + "px";
 173         el.dom.style.top = box.y + "px";
 174         this.activePanel.setSize(box.width, box.height);
 175     },
 176
 177     /**
 178      * Returns the container element for this region.
 179      * @return {Roo.Element}
 180      */
 181     getEl : function(){
 182         return this.activePanel;
 183     },
 184
 185     /**
 186      * Returns true if this region is currently visible.
 187      * @return {Boolean}
 188      */
 189     isVisible : function(){
 190         return this.activePanel ? true : false;
 191     },
 192
 193     setActivePanel : function(panel){
 194         panel = this.getPanel(panel);
 195         if(this.activePanel && this.activePanel != panel){
 196             this.activePanel.setActiveState(false);
 197             this.activePanel.getEl().setLeftTop(-10000,-10000);
 198         }
 199         this.activePanel = panel;
 200         panel.setActiveState(true);
 201         if(this.box){
 202             panel.setSize(this.box.width, this.box.height);
 203         }
 204         this.fireEvent("panelactivated", this, panel);
 205         this.fireEvent("invalidated");
 206     },
 207
 208     /**
 209      * Show the specified panel.
 210      * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
 211      * @return {Roo.ContentPanel} The shown panel or null
 212      */
 213     showPanel : function(panel){
 214         if(panel = this.getPanel(panel)){
 215             this.setActivePanel(panel);
 216         }
 217         return panel;
 218     },
 219
 220     /**
 221      * Get the active panel for this region.
 222      * @return {Roo.ContentPanel} The active panel or null
 223      */
 224     getActivePanel : function(){
 225         return this.activePanel;
 226     },
 227
 228     /**
 229      * Add the passed ContentPanel(s)
 230      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
 231      * @return {Roo.ContentPanel} The panel added (if only one was added)
 232      */
 233     add : function(panel){
 234         if(arguments.length > 1){
 235             for(var i = 0, len = arguments.length; i < len; i++) {
 236                 this.add(arguments[i]);
 237             }
 238             return null;
 239         }
 240         if(this.hasPanel(panel)){
 241             this.showPanel(panel);
 242             return panel;
 243         }
 244         var el = panel.getEl();
 245         if(el.dom.parentNode != this.mgr.el.dom){
 246             this.mgr.el.dom.appendChild(el.dom);
 247         }
 248         if(panel.setRegion){
 249             panel.setRegion(this);
 250         }
 251         this.panels.add(panel);
 252         el.setStyle("position", "absolute");
 253         if(!panel.background){
 254             this.setActivePanel(panel);
 255             if(this.config.initialSize && this.panels.getCount()==1){
 256                 this.resizeTo(this.config.initialSize);
 257             }
 258         }
 259         this.fireEvent("paneladded", this, panel);
 260         return panel;
 261     },
 262
 263     /**
 264      * Returns true if the panel is in this region.
 265      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
 266      * @return {Boolean}
 267      */
 268     hasPanel : function(panel){
 269         if(typeof panel == "object"){ // must be panel obj
 270             panel = panel.getId();
 271         }
 272         return this.getPanel(panel) ? true : false;
 273     },
 274
 275     /**
 276      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
 277      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
 278      * @param {Boolean} preservePanel Overrides the config preservePanel option
 279      * @return {Roo.ContentPanel} The panel that was removed
 280      */
 281     remove : function(panel, preservePanel){
 282         panel = this.getPanel(panel);
 283         if(!panel){
 284             return null;
 285         }
 286         var e = {};
 287         this.fireEvent("beforeremove", this, panel, e);
 288         if(e.cancel === true){
 289             return null;
 290         }
 291         var panelId = panel.getId();
 292         this.panels.removeKey(panelId);
 293         return panel;
 294     },
 295
 296     /**
 297      * Returns the panel specified or null if it's not in this region.
 298      * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
 299      * @return {Roo.ContentPanel}
 300      */
 301     getPanel : function(id){
 302         if(typeof id == "object"){ // must be panel obj
 303             return id;
 304         }
 305         return this.panels.get(id);
 306     },
 307
 308     /**
 309      * Returns this regions position (north/south/east/west/center).
 310      * @return {String}
 311      */
 312     getPosition: function(){
 313         return this.position;
 314     }
 315 });