SplitLayoutRegion.js
/**
* @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);
if(config.split){
this.hide();
}
};
Ext.extend(Ext.SplitLayoutRegion, Ext.LayoutRegion, {
splitTip : 'Drag to resize. Double click to hide.',
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.split.on('moved', this.onSplitMove, this);
this.split.useShim = config.useShim === true;
YAHOO.util.Dom.setStyle([this.split.el.dom, this.split.proxy], 'cursor', this.cursor);
this.split.getMaximumSize = this.getMaxSize.createDelegate(this);
this.split.el.dom.title = this.splitTip;
if(config.collapsible !== false){
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;
}
}
},
getMaxSize : 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());
},
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(){
if(this.split){
this.split.el.setLocation(-2000,-2000);
this.split.el.hide();
}
Ext.SplitLayoutRegion.superclass.hide.call(this);
},
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.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(){
this.el.un('mouseout', this.autoHideHd.mouseout);
this.el.un('mouseover', this.autoHideHd.mouseover);
},
// these names are backwards but not changed for compat
slideOut : function(){
if(this.isSlid){
return;
}
this.isSlid = true;
this.snapshot = {
'colbtn': this.collapseBtn.isVisible(),
'closebtn': this.closeBtn.isVisible()
};
this.collapseBtn.hide();
this.closeBtn.hide();
this.el.show();
this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getAlignAdj());
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
});
},
slideIn : function(callback){
if(!this.isSlid){
return;
}
this.beforeSlide();
this.el.slideOut(this.getSlideAnchor(), {
callback: function(){
this.isSlid = false;
this.el.setStyle('z-index', '');
this.el.setLeftTop(-10000, -10000);
this.afterSlide();
this.clearAutoHide();
Ext.get(document).un('click', this.slideInIf, this);
this.collapseBtn.setVisible(this.snapshot.colbtn);
this.closeBtn.setVisible(this.snapshot.closebtn);
Ext.callback(callback);
this.fireEvent('slidehide', this);
},
scope: this,
block: true
});
},
slideInIf : function(e){
if(!e.within(this.el)){
this.slideIn();
}
},
animateCollapse : function(){
this.beforeSlide();
this.el.setStyle('z-index', 20000);
this.el.slideOut(this.getSlideAnchor(), {
callback : function(){
this.el.setStyle('z-index', '');
this.collapsedEl.show({duration:.1});
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' : 'n',
'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 [-cm.right, -cm.top];
break;
case 'east':
return [cm.left, -cm.top];
break;
case 'north':
return [-cm.left, -cm.bottom];
break;
case 'south':
return [-cm.left, cm.top];
break;
}
},
getExpandAdj : function(){
var c = this.collapsedEl, cm = this.cmargins;
switch(this.position){
case 'west':
return [-(cm.right+c.getWidth()+cm.left), -cm.top];
break;
case 'east':
return [cm.right+c.getWidth()+cm.left, -cm.top];
break;
case 'north':
return [-cm.right, -(cm.top+cm.bottom+c.getHeight())];
break;
case 'south':
return [-cm.right, cm.top+cm.bottom+c.getHeight()];
break;
}
}
});
yui-ext - Copyright © 2006 Jack Slocum. |
Yahoo! UI - Copyright © 2006 Yahoo! Inc.
All rights reserved.