# BorderLayout.js

    /*
    Ext.layout.BorderLayout = function(cfg){
        for(var r in cfg){
            if(typeof cfg[r] == 'object'){
                Ext.apply(cfg[r], this.regionDefaults);
            }
        }
        this.layoutConfig = cfg;
    };

    Ext.extend(Ext.layout.BorderLayout, Ext.layout.ContainerLayout, {
        regionDefaults : {
            titlebar:false,
            autoScroll:false
        },
        renderLayout : function(el){
            this.sublayout = new Ext.BorderLayout(el, this.layoutConfig);
        },

        onLayout : function(ct, target){
            if(!this.sublayout){
                this.renderLayout();
            }
            var items = ct.items.items;
            for(var i = 0, len = items.length; i < len; i++) {
                var c = items[i];
                if(!c.rendered){
                    c.render(target, i);
                    if(this.renderHidden && c != this.activeItem){
                        c.hide();
                    }
                }
            }

        }
    });*/

    Ext.layout.BorderLayout = function(config){
        Ext.layout.BorderLayout.superclass.constructor.call(this, config);
    };

    Ext.extend(Ext.layout.BorderLayout, Ext.layout.ContainerLayout, {
        monitorResize:true,
        rendered : false,

        onLayout : function(ct, target){
            if(!this.rendered){
                target.position();
                target.addClass('x-border-layout-ct');
                var items = ct.items.items;
                for(var i = 0, len = items.length; i < len; i++) {
                    var c = items[i];
                    var pos = c.region;
                    var collapsed = c.collapsed;
                    c.collapsed = false;
                    if(!c.rendered){
                        c.cls = c.cls ? c.cls +' x-border-panel' : 'x-border-panel';
                        c.render(target, i);
                    }
                    this[pos] = pos != 'center' && c.split ?
                        new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :
                        new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos);
                    this[pos].render(ct, c);
                    if(collapsed){
                        this[pos].onCollapse(c, false);
                    }
                }
                this.rendered = true;
            }

            var size = target.getViewSize();
            var w = size.width, h = size.height;
            var centerW = w, centerH = h, centerY = 0, centerX = 0;

            var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center;
            if(n && n.isVisible()){
                var b = n.getSize();
                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.applyLayout(b);
            }
            if(s && s.isVisible()){
                var b = s.getSize();
                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.applyLayout(b);
            }
            if(west && west.isVisible()){
                var b = west.getSize();
                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.applyLayout(b);
            }
            if(e && e.isVisible()){
                var b = e.getSize();
                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.applyLayout(b);
            }

            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)
            };
            c.applyLayout(centerBox);

            //target.repaint();
        }
    });

    Ext.layout.BorderLayout.Region = function(layout, config, pos){
        this.layout = layout;
        this.position = pos;
        Ext.apply(this, config);
        this.margins = Ext.applyIf(this.margins || {}, this.defaultMargins[pos]);
        if(this.collapsible){
            this.cmargins = Ext.applyIf(this.cmargins || {}, this.defaultMargins[pos]);
        }
    };

    Ext.layout.BorderLayout.Region.prototype = {
        collapsible : false,
        split:false,
        floatable: false,
        showPin: false,
        collapsed : false,
        defaultMargins : {
            'north': {top:5,left:5,right:5,bottom:0},
            'south': {top:0,left:5,right:5,bottom:5},
            'east': {top:5,left:0,right:5,bottom:5},
            'west': {top:5,left:5,right:0,bottom:5},
            'center': {top:5,left:5,right:5,bottom:5}
        },
        minWidth:20,
        minHeight:20,

        render : function(ct, p){
            this.panel = p;
            this.el = p.el;
            if(this.position != 'center'){
                p.on({
                    beforecollapse: this.onCollapse,
                    beforeexpand: this.onExpand,
                    hide: this.onHide,
                    show: this.onShow,
                    scope: this
                });
                if(p.tools && p.tools.collapse){
                    p.tools.collapse.addClass('x-tool-collapse-'+this.position);
                }
            }
        },

        onCollapse : function(){
            return false;
        },

        onExpand : function(){
            return false;
        },

        onHide : function(){

        },

        onShow : function(){

        },

        isVisible : function(){
            return !this.panel.hidden;
        },

        getMargins : function(){
            return this.collapsed ? this.cmargins : this.margins;
        },

        getSize : function(){
            return this.collapsed ? this.collapsedEl.getSize() : this.panel.getSize();
        },

        setPanel : function(panel){
            this.panel = panel;

        },

        getMinWidth: function(){
            return this.minWidth;
        },

        getMinHeight: function(){
            return this.minHeight;
        },

        applyLayout : function(box){
            this.panel.setPosition(box.x, box.y);
            this.panel.setSize(box.width, box.height);
        }
    };

    Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){
        Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos);
    };

    Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, {
        splitTip : "Drag to resize.",
        collapsibleSplitTip : "Drag to resize. Double click to hide.",
        useSplitTips : false,

        render : function(ct, p){
            Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p);
            this.splitEl = ct.createChild({
                cls: "x-layout-split x-layout-split-"+this.position, html: "&#160;"
            });
            this.split = new Ext.SplitBar(this.splitEl.dom, p.el, this.orientation);
            this.split.on("beforeapply", this.onSplitMove, this);
            this.split.useShim = this.useShim === true;
            this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ?
                                             'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
            if(this.useSplitTips){
                this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip;
            }
            if(this.collapsible){
                this.splitEl.on("dblclick", this.collapse,  this);
            }

            switch(this.position){
                case 'north':
                    this.split.placement = Ext.SplitBar.BOTTOM;
                    this.split.orientation = Ext.SplitBar.VERTICAL;
                    this.split.el.addClass("x-layout-split-v");
                break;
                case 'south':
                    this.split.placement = Ext.SplitBar.TOP;
                    this.split.orientation = Ext.SplitBar.VERTICAL;
                    this.split.el.addClass("x-layout-split-v");
                break;
                case 'east':
                    this.split.placement = Ext.SplitBar.RIGHT;
                    this.split.orientation = Ext.SplitBar.HORIZONTAL;
                    this.split.el.addClass("x-layout-split-h");
                break;
                case 'west':
                    this.split.placement = Ext.SplitBar.LEFT;
                    this.split.orientation = Ext.SplitBar.HORIZONTAL;
                    this.split.el.addClass("x-layout-split-h");
                break;
            }
        },

        getHMaxSize : function(){
             var cmax = this.maxSize || 10000;
             var center = this.layout.center;
             return Math.min(cmax, (this.el.getWidth()+center.el.getWidth())-center.getMinWidth());
        },

        getVMaxSize : function(){
             var cmax = this.config.maxSize || 10000;
             var center = this.mgr.getRegion("center");
             return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
        },

        onSplitMove : function(split, newSize){
            var s = this.panel.getSize();
            if(this.position == 'north' || this.position == 'south'){
                this.panel.setSize(s.width, newSize);
            }else{
                this.panel.setSize(newSize, s.height);
            }
            this.layout.layout();
        },

        getSplitBar : function(){
            return this.split;
        },

        beforeSlide: function(){
            /*if(Ext.isGecko){// firefox overflow auto bug workaround
                this.bodyEl.clip();
                if(this.tabs) this.tabs.bodyEl.clip();
                if(this.activePanel){
                    this.activePanel.getEl().clip();

                    if(this.activePanel.beforeSlide){
                        this.activePanel.beforeSlide();
                    }
                }
            }*/
        },

        afterSlide : function(){
            /*if(Ext.isGecko){// firefox overflow auto bug workaround
                this.bodyEl.unclip();
                if(this.tabs) this.tabs.bodyEl.unclip();
                if(this.activePanel){
                    this.activePanel.getEl().unclip();
                    if(this.activePanel.afterSlide){
                        this.activePanel.afterSlide();
                    }
                }
            }*/
        },

        initAutoHide : function(){
            if(this.autoHide !== false){
                if(!this.autoHideHd){
                    var st = new Ext.util.DelayedTask(this.slideIn, this);
                    this.autoHideHd = {
                        "mouseout": function(e){
                            if(!e.within(this.el, true)){
                                st.delay(500);
                            }
                        },
                        "mouseover" : function(e){
                            st.cancel();
                        },
                        scope : this
                    };
                }
                this.el.on(this.autoHideHd);
            }
        },

        clearAutoHide : function(){
            if(this.autoHide !== false){
                this.el.un("mouseout", this.autoHideHd.mouseout);
                this.el.un("mouseover", this.autoHideHd.mouseover);
            }
        },

        clearMonitor : function(){
            Ext.get(document).un("click", this.slideInIf, this);
        },

        // these names are backwards but not changed for compat
        slideOut : function(){
            if(this.isSlid || this.el.hasActiveFx()){
                return;
            }
            this.isSlid = true;
            if(this.collapseBtn){
                this.collapseBtn.hide();
            }
            this.closeBtnState = this.closeBtn.getStyle('display');
            this.closeBtn.hide();
            if(this.stickBtn){
                this.stickBtn.show();
            }
            this.el.show();
            this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
            this.beforeSlide();
            this.el.setStyle("z-index", 20000);
            this.el.slideIn(this.getSlideAnchor(), {
                callback: function(){
                    this.afterSlide();
                    this.initAutoHide();
                    Ext.get(document).on("click", this.slideInIf, this);
                    this.fireEvent("slideshow", this);
                },
                scope: this,
                block: true
            });
        },

        afterSlideIn : function(){
            this.clearAutoHide();
            this.isSlid = false;
            this.clearMonitor();
            this.el.setStyle("z-index", "");
            if(this.collapseBtn){
                this.collapseBtn.show();
            }
            this.closeBtn.setStyle('display', this.closeBtnState);
            if(this.stickBtn){
                this.stickBtn.hide();
            }
            this.fireEvent("slidehide", this);
        },

        slideIn : function(cb){
            if(!this.isSlid || this.el.hasActiveFx()){
                Ext.callback(cb);
                return;
            }
            this.isSlid = false;
            this.beforeSlide();
            this.el.slideOut(this.getSlideAnchor(), {
                callback: function(){
                    this.el.setLeftTop(-10000, -10000);
                    this.afterSlide();
                    this.afterSlideIn();
                    Ext.callback(cb);
                },
                scope: this,
                block: true
            });
        },

        slideInIf : function(e){
            if(!e.within(this.el)){
                this.slideIn();
            }
        },

        animateCollapse : function(){
            this.beforeSlide();
            this.el.setStyle("z-index", 20000);
            var anchor = this.getSlideAnchor();
            this.el.slideOut(anchor, {
                callback : function(){
                    this.el.setStyle("z-index", "");
                    this.collapsedEl.slideIn(anchor, {duration:.3});
                    this.afterSlide();
                    this.el.setLocation(-10000,-10000);
                    this.el.hide();
                    this.fireEvent("collapsed", this);
                },
                scope: this,
                block: true
            });
        },

        animateExpand : function(){
            this.beforeSlide();
            this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
            this.el.setStyle("z-index", 20000);
            this.collapsedEl.hide({
                duration:.1
            });
            this.el.slideIn(this.getSlideAnchor(), {
                callback : function(){
                    this.el.setStyle("z-index", "");
                    this.afterSlide();
                    if(this.split){
                        this.split.el.show();
                    }
                    this.fireEvent("invalidated", this);
                    this.fireEvent("expanded", this);
                },
                scope: this,
                block: true
            });
        },

        anchors : {
            "west" : "left",
            "east" : "right",
            "north" : "top",
            "south" : "bottom"
        },

        sanchors : {
            "west" : "l",
            "east" : "r",
            "north" : "t",
            "south" : "b"
        },

        canchors : {
            "west" : "tl-tr",
            "east" : "tr-tl",
            "north" : "tl-bl",
            "south" : "bl-tl"
        },

        getAnchor : function(){
            return this.anchors[this.position];
        },

        getCollapseAnchor : function(){
            return this.canchors[this.position];
        },

        getSlideAnchor : function(){
            return this.sanchors[this.position];
        },

        getAlignAdj : function(){
            var cm = this.cmargins;
            switch(this.position){
                case "west":
                    return [0, 0];
                break;
                case "east":
                    return [0, 0];
                break;
                case "north":
                    return [0, 0];
                break;
                case "south":
                    return [0, 0];
                break;
            }
        },

        getExpandAdj : function(){
            var c = this.collapsedEl, cm = this.cmargins;
            switch(this.position){
                case "west":
                    return [-(cm.right+c.getWidth()+cm.left), 0];
                break;
                case "east":
                    return [cm.right+c.getWidth()+cm.left, 0];
                break;
                case "north":
                    return [0, -(cm.top+cm.bottom+c.getHeight())];
                break;
                case "south":
                    return [0, cm.top+cm.bottom+c.getHeight()];
                break;
            }
        }
    });

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.