333 lines
No EOL
10 KiB
JavaScript
333 lines
No EOL
10 KiB
JavaScript
/*
|
|
* Ext JS Library 1.0.1
|
|
* Copyright(c) 2006-2007, Ext JS, LLC.
|
|
* licensing@extjs.com
|
|
*
|
|
* http://www.extjs.com/license
|
|
*/
|
|
|
|
/**
|
|
* @class Ext.SplitLayoutRegion
|
|
* @extends Ext.LayoutRegion
|
|
* Adds a splitbar and other (private) useful functionality to a LayoutRegion
|
|
*/
|
|
Ext.SplitLayoutRegion = function(mgr, config, pos, cursor){
|
|
this.cursor = cursor;
|
|
Ext.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
|
|
};
|
|
|
|
Ext.extend(Ext.SplitLayoutRegion, Ext.LayoutRegion, {
|
|
splitTip : "Drag to resize.",
|
|
collapsibleSplitTip : "Drag to resize. Double click to hide.",
|
|
useSplitTips : false,
|
|
|
|
applyConfig : function(config){
|
|
Ext.SplitLayoutRegion.superclass.applyConfig.call(this, config);
|
|
if(config.split){
|
|
if(!this.split){
|
|
var splitEl = Ext.DomHelper.append(this.mgr.el.dom,
|
|
{tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: " "});
|
|
/** The SplitBar for this region @type Ext.SplitBar */
|
|
this.split = new Ext.SplitBar(splitEl, this.el, this.orientation);
|
|
this.split.on("moved", this.onSplitMove, this);
|
|
this.split.useShim = config.useShim === true;
|
|
this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
|
|
if(this.useSplitTips){
|
|
this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
|
|
}
|
|
if(config.collapsible){
|
|
this.split.el.on("dblclick", this.collapse, this);
|
|
}
|
|
}
|
|
if(typeof config.minSize != "undefined"){
|
|
this.split.minSize = config.minSize;
|
|
}
|
|
if(typeof config.maxSize != "undefined"){
|
|
this.split.maxSize = config.maxSize;
|
|
}
|
|
if(config.hideWhenEmpty || config.hidden){
|
|
this.hideSplitter();
|
|
}
|
|
}
|
|
},
|
|
|
|
getHMaxSize : function(){
|
|
var cmax = this.config.maxSize || 10000;
|
|
var center = this.mgr.getRegion("center");
|
|
return Math.min(cmax, (this.el.getWidth()+center.getEl().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){
|
|
this.fireEvent("resized", this, newSize);
|
|
},
|
|
|
|
/**
|
|
* Returns the SplitBar for this region.
|
|
* @return {Ext.SplitBar}
|
|
*/
|
|
getSplitBar : function(){
|
|
return this.split;
|
|
},
|
|
|
|
hide : function(){
|
|
this.hideSplitter();
|
|
Ext.SplitLayoutRegion.superclass.hide.call(this);
|
|
},
|
|
|
|
hideSplitter : function(){
|
|
if(this.split){
|
|
this.split.el.setLocation(-2000,-2000);
|
|
this.split.el.hide();
|
|
}
|
|
},
|
|
|
|
show : function(){
|
|
if(this.split){
|
|
this.split.el.show();
|
|
}
|
|
Ext.SplitLayoutRegion.superclass.show.call(this);
|
|
},
|
|
|
|
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;
|
|
}
|
|
}
|
|
}); |