/** * @class YAHOO.ext.BorderLayout * @extends YAHOO.ext.LayoutManager * This class represents a common layout manager used in desktop applications. For screenshots and more details, * please see:

* Cross Browser Layouts - Part 1
* Cross Browser Layouts - Part 2

* Example:

 var layout = new YAHOO.ext.BorderLayout(document.body, {
    north: {
        initialSize: 25,
        titlebar: false
    },
    west: {
        split:true,
        initialSize: 200,
        minSize: 175,
        maxSize: 400,
        titlebar: true,
        collapsible: true
    },
    east: {
        split:true,
        initialSize: 202,
        minSize: 175,
        maxSize: 400,
        titlebar: true,
        collapsible: true
    },
    south: {
        split:true,
        initialSize: 100,
        minSize: 100,
        maxSize: 200,
        titlebar: true,
        collapsible: true
    },
    center: {
        titlebar: true,
        autoScroll:true,
        resizeTabs: true,
        minTabWidth: 50,
        preferredTabWidth: 150
    }
});

// shorthand
var CP = YAHOO.ext.ContentPanel;

layout.beginUpdate();
layout.add('north', new CP('north', 'North'));
layout.add('south', new CP('south', {title: 'South', closable: true}));
layout.add('west', new CP('west', {title: 'West'}));
layout.add('east', new CP('autoTabs', {title: 'Auto Tabs', closable: true}));
layout.add('center', new CP('center1', {title: 'Close Me', closable: true}));
layout.add('center', new CP('center2', {title: 'Center Panel', closable: false}));
layout.getRegion('center').showPanel('center1');
layout.endUpdate();
* @constructor * Create a new BorderLayout * @param {String/HTMLElement/Element} container The container this layout is bound to * @param {Object} config Configuration options */ YAHOO.ext.BorderLayout = function(container, config){ config = config || {}; YAHOO.ext.BorderLayout.superclass.constructor.call(this, container); this.factory = config.factory || YAHOO.ext.BorderLayout.RegionFactory; /** * True to hide the center panel while performing layouts. This helps when the center region contains * heavy components such as a yui-ext grid. * @type Boolean */ this.hideOnLayout = config.hideOnLayout || false; for(var i = 0, len = this.factory.validRegions.length; i < len; i++) { var target = this.factory.validRegions[i]; if(config[target]){ this.addRegion(target, config[target]); } } //this.dragOverDelegate = YAHOO.ext.EventManager.wrap(this.onDragOver, this, true); }; YAHOO.extendX(YAHOO.ext.BorderLayout, YAHOO.ext.LayoutManager, { /** * Creates and adds a new region if it doesn't already exist. * @param {String} target The target region key (north, south, east, west or center). * @param {Object} config The regions config object * @return {BorderLayoutRegion} The new region */ addRegion : function(target, config){ if(!this.regions[target]){ var r = this.factory.create(target, this, config); this.regions[target] = r; r.on('visibilitychange', this.layout, this, true); r.on('paneladded', this.layout, this, true); r.on('panelremoved', this.layout, this, true); r.on('invalidated', this.layout, this, true); r.on('resized', this.onRegionResized, this, true); r.on('collapsed', this.onRegionCollapsed, this, true); r.on('expanded', this.onRegionExpanded, this, true); } return this.regions[target]; }, /** * Performs a layout update. */ layout : function(){ if(this.updating) return; //var bench = new YAHOO.ext.util.Bench(); //bench.start('Layout...'); var size = this.getViewSize(); var w = size.width, h = size.height; var centerW = w, centerH = h, centerY = 0, centerX = 0; var x = 0, y = 0; var rs = this.regions; var n = rs['north'], s = rs['south'], west = rs['west'], e = rs['east'], c = rs['center']; if(this.hideOnLayout){ c.el.setStyle('display', 'none'); } if(n && n.isVisible()){ var b = n.getBox(); var m = n.getMargins(); b.width = w - (m.left+m.right); b.x = m.left; b.y = m.top; centerY = b.height + b.y + m.bottom; centerH -= centerY; n.updateBox(this.safeBox(b)); } if(s && s.isVisible()){ var b = s.getBox(); var m = s.getMargins(); b.width = w - (m.left+m.right); b.x = m.left; var totalHeight = (b.height + m.top + m.bottom); b.y = h - totalHeight + m.top; centerH -= totalHeight; s.updateBox(this.safeBox(b)); } if(west && west.isVisible()){ var b = west.getBox(); var m = west.getMargins(); b.height = centerH - (m.top+m.bottom); b.x = m.left; b.y = centerY + m.top; var totalWidth = (b.width + m.left + m.right); centerX += totalWidth; centerW -= totalWidth; west.updateBox(this.safeBox(b)); } if(e && e.isVisible()){ var b = e.getBox(); var m = e.getMargins(); b.height = centerH - (m.top+m.bottom); var totalWidth = (b.width + m.left + m.right); b.x = w - totalWidth + m.left; b.y = centerY + m.top; centerW -= totalWidth; e.updateBox(this.safeBox(b)); } if(c){ var m = c.getMargins(); var centerBox = { x: centerX + m.left, y: centerY + m.top, width: centerW - (m.left+m.right), height: centerH - (m.top+m.bottom) }; if(this.hideOnLayout){ c.el.setStyle('display', 'block'); } c.updateBox(this.safeBox(centerBox)); } this.el.repaint(); this.fireEvent('layout', this); //bench.stop(); //alert(bench.toString()); }, safeBox : function(box){ box.width = Math.max(0, box.width); box.height = Math.max(0, box.height); return box; }, /** * Adds a ContentPanel (or subclass) to this layout. * @param {String} target The target region key (north, south, east, west or center). * @param {YAHOO.ext.ContentPanel} panel The panel to add * @return {YAHOO.ext.ContentPanel} The added panel */ add : function(target, panel){ target = target.toLowerCase(); return this.regions[target].add(panel); }, /** * Adds a ContentPanel (or subclass) to this layout. * @param {String} target The target region key (north, south, east, west or center). * @param {Number/String/YAHOO.ext.ContentPanel} panel The index, id or panel to remove * @return {YAHOO.ext.ContentPanel} The removed panel */ remove : function(target, panel){ target = target.toLowerCase(); return this.regions[target].remove(panel); }, /** * Searches all regions for a panel with the specified id * @param {String} panelId * @return {YAHOO.ext.ContentPanel} The panel or null if it wasn't found */ findPanel : function(panelId){ var rs = this.regions; for(var target in rs){ if(typeof rs[target] != 'function'){ var p = rs[target].getPanel(panelId); if(p){ return p; } } } return null; }, /** * Searches all regions for a panel with the specified id and activates (shows) it. * @param {String/ContentPanel} panelId The panels id or the panel itself * @return {YAHOO.ext.ContentPanel} The shown panel or null */ showPanel : function(panelId) { var rs = this.regions; for(var target in rs){ var r = rs[target]; if(typeof r != 'function'){ if(r.hasPanel(panelId)){ return r.showPanel(panelId); } } } return null; }, /** * Restores this layouts state using YAHOO.ext.state.Manager or the state provided by the passed provider. * @param {YAHOO.ext.state.Provider} provider (optional) An alternate state provider */ restoreState : function(provider){ if(!provider){ provider = YAHOO.ext.state.Manager; } var sm = new YAHOO.ext.LayoutStateManager(); sm.init(this, provider); } }); YAHOO.ext.BorderLayout.RegionFactory = {}; YAHOO.ext.BorderLayout.RegionFactory.validRegions = ['north','south','east','west','center']; YAHOO.ext.BorderLayout.RegionFactory.create = function(target, mgr, config){ target = target.toLowerCase(); if(config.lightweight || config.basic){ return new YAHOO.ext.BasicLayoutRegion(mgr, config, target); } switch(target){ case 'north': return new YAHOO.ext.NorthLayoutRegion(mgr, config); case 'south': return new YAHOO.ext.SouthLayoutRegion(mgr, config); case 'east': return new YAHOO.ext.EastLayoutRegion(mgr, config); case 'west': return new YAHOO.ext.WestLayoutRegion(mgr, config); case 'center': return new YAHOO.ext.CenterLayoutRegion(mgr, config); } throw 'Layout region "'+target+'" not supported.'; };