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