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: " "
});
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.