4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
15 * @class Roo.SplitLayoutRegion
16 * @extends Roo.LayoutRegion
17 * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
19 Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
21 Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
24 Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
25 splitTip : "Drag to resize.",
26 collapsibleSplitTip : "Drag to resize. Double click to hide.",
29 applyConfig : function(config){
30 Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
33 var splitEl = Roo.DomHelper.append(this.mgr.el.dom,
34 {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: " "});
35 /** The SplitBar for this region
36 * @type Roo.SplitBar */
37 this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
38 this.split.on("moved", this.onSplitMove, this);
39 this.split.useShim = config.useShim === true;
40 this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
41 if(this.useSplitTips){
42 this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
44 if(config.collapsible){
45 this.split.el.on("dblclick", this.collapse, this);
48 if(typeof config.minSize != "undefined"){
49 this.split.minSize = config.minSize;
51 if(typeof config.maxSize != "undefined"){
52 this.split.maxSize = config.maxSize;
54 if(config.hideWhenEmpty || config.hidden || config.collapsed){
60 getHMaxSize : function(){
61 var cmax = this.config.maxSize || 10000;
62 var center = this.mgr.getRegion("center");
63 return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
66 getVMaxSize : function(){
67 var cmax = this.config.maxSize || 10000;
68 var center = this.mgr.getRegion("center");
69 return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
72 onSplitMove : function(split, newSize){
73 this.fireEvent("resized", this, newSize);
77 * Returns the {@link Roo.SplitBar} for this region.
78 * @return {Roo.SplitBar}
80 getSplitBar : function(){
86 Roo.SplitLayoutRegion.superclass.hide.call(this);
89 hideSplitter : function(){
91 this.split.el.setLocation(-2000,-2000);
100 Roo.SplitLayoutRegion.superclass.show.call(this);
103 beforeSlide: function(){
104 if(Roo.isGecko){// firefox overflow auto bug workaround
106 if(this.tabs) this.tabs.bodyEl.clip();
107 if(this.activePanel){
108 this.activePanel.getEl().clip();
110 if(this.activePanel.beforeSlide){
111 this.activePanel.beforeSlide();
117 afterSlide : function(){
118 if(Roo.isGecko){// firefox overflow auto bug workaround
119 this.bodyEl.unclip();
120 if(this.tabs) this.tabs.bodyEl.unclip();
121 if(this.activePanel){
122 this.activePanel.getEl().unclip();
123 if(this.activePanel.afterSlide){
124 this.activePanel.afterSlide();
130 initAutoHide : function(){
131 if(this.autoHide !== false){
132 if(!this.autoHideHd){
133 var st = new Roo.util.DelayedTask(this.slideIn, this);
135 "mouseout": function(e){
136 if(!e.within(this.el, true)){
140 "mouseover" : function(e){
146 this.el.on(this.autoHideHd);
150 clearAutoHide : function(){
151 if(this.autoHide !== false){
152 this.el.un("mouseout", this.autoHideHd.mouseout);
153 this.el.un("mouseover", this.autoHideHd.mouseover);
157 clearMonitor : function(){
158 Roo.get(document).un("click", this.slideInIf, this);
161 // these names are backwards but not changed for compat
162 slideOut : function(){
163 if(this.isSlid || this.el.hasActiveFx()){
167 if(this.collapseBtn){
168 this.collapseBtn.hide();
170 this.closeBtnState = this.closeBtn.getStyle('display');
171 this.closeBtn.hide();
173 this.stickBtn.show();
176 this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
178 this.el.setStyle("z-index", 10001);
179 this.el.slideIn(this.getSlideAnchor(), {
180 callback: function(){
183 Roo.get(document).on("click", this.slideInIf, this);
184 this.fireEvent("slideshow", this);
191 afterSlideIn : function(){
192 this.clearAutoHide();
195 this.el.setStyle("z-index", "");
196 if(this.collapseBtn){
197 this.collapseBtn.show();
199 this.closeBtn.setStyle('display', this.closeBtnState);
201 this.stickBtn.hide();
203 this.fireEvent("slidehide", this);
206 slideIn : function(cb){
207 if(!this.isSlid || this.el.hasActiveFx()){
213 this.el.slideOut(this.getSlideAnchor(), {
214 callback: function(){
215 this.el.setLeftTop(-10000, -10000);
225 slideInIf : function(e){
226 if(!e.within(this.el)){
231 animateCollapse : function(){
233 this.el.setStyle("z-index", 20000);
234 var anchor = this.getSlideAnchor();
235 this.el.slideOut(anchor, {
236 callback : function(){
237 this.el.setStyle("z-index", "");
238 this.collapsedEl.slideIn(anchor, {duration:.3});
240 this.el.setLocation(-10000,-10000);
242 this.fireEvent("collapsed", this);
249 animateExpand : function(){
251 this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
252 this.el.setStyle("z-index", 20000);
253 this.collapsedEl.hide({
256 this.el.slideIn(this.getSlideAnchor(), {
257 callback : function(){
258 this.el.setStyle("z-index", "");
261 this.split.el.show();
263 this.fireEvent("invalidated", this);
264 this.fireEvent("expanded", this);
292 getAnchor : function(){
293 return this.anchors[this.position];
296 getCollapseAnchor : function(){
297 return this.canchors[this.position];
300 getSlideAnchor : function(){
301 return this.sanchors[this.position];
304 getAlignAdj : function(){
305 var cm = this.cmargins;
306 switch(this.position){
322 getExpandAdj : function(){
323 var c = this.collapsedEl, cm = this.cmargins;
324 switch(this.position){
326 return [-(cm.right+c.getWidth()+cm.left), 0];
329 return [cm.right+c.getWidth()+cm.left, 0];
332 return [0, -(cm.top+cm.bottom+c.getHeight())];
335 return [0, cm.top+cm.bottom+c.getHeight()];