2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
10 * @class Ext.layout.BorderLayout
\r
11 * @extends Ext.layout.ContainerLayout
\r
12 * <p>This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic
\r
13 * split bars between regions and built-in expanding and collapsing of regions.
\r
14 * This class is intended to be extended or created via the layout:'border' {@link Ext.Container#layout} config,
\r
15 * and should generally not need to be created directly via the new keyword.</p>
\r
16 * <p>BorderLayout does not have any direct config options (other than inherited ones). All configs available
\r
17 * for customizing the BorderLayout are at the {@link Ext.layout.BorderLayout.Region} and
\r
18 * {@link Ext.layout.BorderLayout.SplitRegion} levels.</p>
\r
19 * <p><b>The regions of a BorderLayout are fixed at render time and thereafter, no regions may be removed or
\r
20 * added. The BorderLayout must have a center region, which will always fill the remaining space not used by
\r
21 * the other regions in the layout.</b></p>
\r
22 * <p>Example usage:</p>
\r
24 var border = new Ext.Panel({
\r
25 title: 'Border Layout',
\r
28 title: 'South Panel',
\r
35 title: 'West Panel',
\r
38 cmargins: '5 5 0 5',
\r
43 title: 'Main Content',
\r
50 Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, {
\r
57 onLayout : function(ct, target){
\r
61 target.addClass('x-border-layout-ct');
\r
62 var items = ct.items.items;
\r
64 for(var i = 0, len = items.length; i < len; i++) {
\r
70 c.collapsed = false;
\r
72 c.cls = c.cls ? c.cls +' x-border-panel' : 'x-border-panel';
\r
73 c.render(target, i);
\r
75 this[pos] = pos != 'center' && c.split ?
\r
76 new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :
\r
77 new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos);
\r
78 this[pos].render(target, c);
\r
80 this.rendered = true;
\r
83 var size = target.getViewSize();
\r
84 if(size.width < 20 || size.height < 20){ // display none?
\r
86 this.restoreCollapsed = collapsed;
\r
89 }else if(this.restoreCollapsed){
\r
90 collapsed = this.restoreCollapsed;
\r
91 delete this.restoreCollapsed;
\r
94 var w = size.width, h = size.height;
\r
95 var centerW = w, centerH = h, centerY = 0, centerX = 0;
\r
97 var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center;
\r
98 if(!c && Ext.layout.BorderLayout.WARN !== false){
\r
99 throw 'No center region defined in BorderLayout ' + ct.id;
\r
102 if(n && n.isVisible()){
\r
103 var b = n.getSize();
\r
104 var m = n.getMargins();
\r
105 b.width = w - (m.left+m.right);
\r
108 centerY = b.height + b.y + m.bottom;
\r
109 centerH -= centerY;
\r
112 if(s && s.isVisible()){
\r
113 var b = s.getSize();
\r
114 var m = s.getMargins();
\r
115 b.width = w - (m.left+m.right);
\r
117 var totalHeight = (b.height + m.top + m.bottom);
\r
118 b.y = h - totalHeight + m.top;
\r
119 centerH -= totalHeight;
\r
122 if(west && west.isVisible()){
\r
123 var b = west.getSize();
\r
124 var m = west.getMargins();
\r
125 b.height = centerH - (m.top+m.bottom);
\r
127 b.y = centerY + m.top;
\r
128 var totalWidth = (b.width + m.left + m.right);
\r
129 centerX += totalWidth;
\r
130 centerW -= totalWidth;
\r
131 west.applyLayout(b);
\r
133 if(e && e.isVisible()){
\r
134 var b = e.getSize();
\r
135 var m = e.getMargins();
\r
136 b.height = centerH - (m.top+m.bottom);
\r
137 var totalWidth = (b.width + m.left + m.right);
\r
138 b.x = w - totalWidth + m.left;
\r
139 b.y = centerY + m.top;
\r
140 centerW -= totalWidth;
\r
145 var m = c.getMargins();
\r
147 x: centerX + m.left,
\r
148 y: centerY + m.top,
\r
149 width: centerW - (m.left+m.right),
\r
150 height: centerH - (m.top+m.bottom)
\r
152 c.applyLayout(centerBox);
\r
155 for(var i = 0, len = collapsed.length; i < len; i++){
\r
156 collapsed[i].collapse(false);
\r
160 if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue
\r
166 destroy: function() {
\r
167 var r = ['north', 'south', 'east', 'west'];
\r
168 for (var i = 0; i < r.length; i++) {
\r
169 var region = this[r[i]];
\r
171 if(region.destroy){
\r
173 }else if (region.split){
\r
174 region.split.destroy(true);
\r
178 Ext.layout.BorderLayout.superclass.destroy.call(this);
\r
182 * @property activeItem
\r
188 * @class Ext.layout.BorderLayout.Region
\r
189 * This is a region of a BorderLayout that acts as a subcontainer within the layout. Each region has its own
\r
190 * layout that is independent of other regions and the containing BorderLayout, and can be any of the valid
\r
191 * Ext layout types. Region size is managed automatically and cannot be changed by the user -- for resizable
\r
192 * regions, see {@link Ext.layout.BorderLayout.SplitRegion}.
\r
194 * Create a new Region.
\r
195 * @param {Layout} layout Any valid Ext layout class
\r
196 * @param {Object} config The configuration options
\r
197 * @param {String} position The region position. Valid values are: north, south, east, west and center. Every
\r
198 * BorderLayout must have a center region for the primary content -- all other regions are optional.
\r
200 Ext.layout.BorderLayout.Region = function(layout, config, pos){
\r
201 Ext.apply(this, config);
\r
202 this.layout = layout;
\r
203 this.position = pos;
\r
205 if(typeof this.margins == 'string'){
\r
206 this.margins = this.layout.parseMargins(this.margins);
\r
208 this.margins = Ext.applyIf(this.margins || {}, this.defaultMargins);
\r
209 if(this.collapsible){
\r
210 if(typeof this.cmargins == 'string'){
\r
211 this.cmargins = this.layout.parseMargins(this.cmargins);
\r
213 if(this.collapseMode == 'mini' && !this.cmargins){
\r
214 this.cmargins = {left:0,top:0,right:0,bottom:0};
\r
216 this.cmargins = Ext.applyIf(this.cmargins || {},
\r
217 pos == 'north' || pos == 'south' ? this.defaultNSCMargins : this.defaultEWCMargins);
\r
222 Ext.layout.BorderLayout.Region.prototype = {
\r
224 * @cfg {Boolean} animFloat
\r
225 * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated panel that will
\r
226 * close again once the user mouses out of that panel (or clicks out if autoHide = false). Setting animFloat
\r
227 * to false will prevent the open and close of these floated panels from being animated (defaults to true).
\r
230 * @cfg {Boolean} autoHide
\r
231 * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated panel. If
\r
232 * autoHide is true, the panel will automatically hide after the user mouses out of the panel. If autoHide
\r
233 * is false, the panel will continue to display until the user clicks outside of the panel (defaults to true).
\r
236 * @cfg {Boolean} collapsed
\r
237 * By default, collapsible regions will be visible when rendered. Set the collapsed config to true to render
\r
238 * the region as collapsed.
\r
241 * @cfg {String} collapseMode
\r
242 * By default, collapsible regions are collapsed by clicking the expand/collapse tool button that renders into
\r
243 * the region's title bar. Optionally, when collapseMode is set to 'mini' the region's split bar will also
\r
244 * display a small collapse button in the center of the bar. In 'mini' mode the region will collapse to a
\r
245 * thinner bar than in normal mode. By default collapseMode is undefined, and the only two supported values
\r
246 * are undefined and 'mini'. Note that if a collapsible region does not have a title bar, then collapseMode
\r
247 * must be set to 'mini' in order for the region to be collapsible by the user as the tool button will not
\r
251 * @cfg {Object} margins
\r
252 * An object containing margins to apply to the region when in the expanded state in the format:<pre><code>
\r
255 right: (right margin),
\r
256 bottom: (bottom margin)
\r
257 left: (left margin),
\r
259 * <p>May also be a string containing space-separated, numeric margin values. The order of the sides associated
\r
260 * with each value matches the way CSS processes margin values:</p>
\r
262 * <li>If there is only one value, it applies to all sides.</li>
\r
263 * <li>If there are two values, the top and bottom borders are set to the first value and the right
\r
264 * and left are set to the second.</li>
\r
265 * <li>If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom
\r
266 * is set to the third.</li>
\r
267 * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>
\r
271 * @cfg {Object} cmargins
\r
272 * An object containing margins to apply to the region when in the collapsed state in the format:<pre><code>
\r
275 right: (right margin),
\r
276 bottom: (bottom margin)
\r
277 left: (left margin),
\r
279 * <p>May also be a string containing space-separated, numeric margin values. The order of the sides associated
\r
280 * with each value matches the way CSS processes margin values.</p>
\r
282 * <li>If there is only one value, it applies to all sides.</li>
\r
283 * <li>If there are two values, the top and bottom borders are set to the first value and the right
\r
284 * and left are set to the second.</li>
\r
285 * <li>If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom
\r
286 * is set to the third.</li>
\r
287 * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>
\r
291 * @cfg {Boolean} collapsible
\r
292 * True to allow the user to collapse this region (defaults to false). If true, an expand/collapse tool button
\r
293 * will automatically be rendered into the title bar of the region, otherwise the button will not be shown.
\r
294 * Note that a title bar is required to display the toggle button -- if no region title is specified, the
\r
295 * region will only be collapsible if {@link #collapseMode} is set to 'mini'.
\r
297 collapsible : false,
\r
299 * @cfg {Boolean} split
\r
300 * True to display a {@link Ext.SplitBar} between this region and its neighbor, allowing the user to resize
\r
301 * the regions dynamically (defaults to false). When split == true, it is common to specify a minSize
\r
302 * and maxSize for the BoxComponent representing the region. These are not native configs of BoxComponent, and
\r
303 * are used only by this class.
\r
307 * @cfg {Boolean} floatable
\r
308 * True to allow clicking a collapsed region's bar to display the region's panel floated above the layout,
\r
309 * false to force the user to fully expand a collapsed region by clicking the expand button to see it again
\r
310 * (defaults to true).
\r
314 * @cfg {Number} minWidth
\r
315 * The minimum allowable width in pixels for this region (defaults to 50)
\r
319 * @cfg {Number} minHeight
\r
320 * The minimum allowable height in pixels for this region (defaults to 50)
\r
325 defaultMargins : {left:0,top:0,right:0,bottom:0},
\r
327 defaultNSCMargins : {left:5,top:5,right:5,bottom:5},
\r
329 defaultEWCMargins : {left:5,top:0,right:5,bottom:0},
\r
332 * True if this region is collapsed. Read-only.
\r
336 isCollapsed : false,
\r
339 * This region's panel. Read-only.
\r
344 * This region's layout. Read-only.
\r
349 * This region's layout position (north, south, east, west or center). Read-only.
\r
351 * @property position
\r
355 render : function(ct, p){
\r
357 p.el.enableDisplayMode();
\r
358 this.targetEl = ct;
\r
361 var gs = p.getState, ps = this.position;
\r
362 p.getState = function(){
\r
363 return Ext.apply(gs.call(p) || {}, this.state);
\r
364 }.createDelegate(this);
\r
366 if(ps != 'center'){
\r
367 p.allowQueuedExpand = false;
\r
369 beforecollapse: this.beforeCollapse,
\r
370 collapse: this.onCollapse,
\r
371 beforeexpand: this.beforeExpand,
\r
372 expand: this.onExpand,
\r
377 if(this.collapsible){
\r
378 p.collapseEl = 'el';
\r
379 p.slideAnchor = this.getSlideAnchor();
\r
381 if(p.tools && p.tools.toggle){
\r
382 p.tools.toggle.addClass('x-tool-collapse-'+ps);
\r
383 p.tools.toggle.addClassOnOver('x-tool-collapse-'+ps+'-over');
\r
389 getCollapsedEl : function(){
\r
390 if(!this.collapsedEl){
\r
391 if(!this.toolTemplate){
\r
392 var tt = new Ext.Template(
\r
393 '<div class="x-tool x-tool-{id}"> </div>'
\r
395 tt.disableFormats = true;
\r
397 Ext.layout.BorderLayout.Region.prototype.toolTemplate = tt;
\r
399 this.collapsedEl = this.targetEl.createChild({
\r
400 cls: "x-layout-collapsed x-layout-collapsed-"+this.position,
\r
401 id: this.panel.id + '-xcollapsed'
\r
403 this.collapsedEl.enableDisplayMode('block');
\r
405 if(this.collapseMode == 'mini'){
\r
406 this.collapsedEl.addClass('x-layout-cmini-'+this.position);
\r
407 this.miniCollapsedEl = this.collapsedEl.createChild({
\r
408 cls: "x-layout-mini x-layout-mini-"+this.position, html: " "
\r
410 this.miniCollapsedEl.addClassOnOver('x-layout-mini-over');
\r
411 this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
\r
412 this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true});
\r
414 var t = this.toolTemplate.append(
\r
415 this.collapsedEl.dom,
\r
416 {id:'expand-'+this.position}, true);
\r
417 t.addClassOnOver('x-tool-expand-'+this.position+'-over');
\r
418 t.on('click', this.onExpandClick, this, {stopEvent:true});
\r
420 if(this.floatable !== false){
\r
421 this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
\r
422 this.collapsedEl.on("click", this.collapseClick, this);
\r
426 return this.collapsedEl;
\r
430 onExpandClick : function(e){
\r
432 this.afterSlideIn();
\r
433 this.panel.expand(false);
\r
435 this.panel.expand();
\r
440 onCollapseClick : function(e){
\r
441 this.panel.collapse();
\r
445 beforeCollapse : function(p, animate){
\r
446 this.lastAnim = animate;
\r
448 this.splitEl.hide();
\r
450 this.getCollapsedEl().show();
\r
451 this.panel.el.setStyle('z-index', 100);
\r
452 this.isCollapsed = true;
\r
453 this.layout.layout();
\r
457 onCollapse : function(animate){
\r
458 this.panel.el.setStyle('z-index', 1);
\r
459 if(this.lastAnim === false || this.panel.animCollapse === false){
\r
460 this.getCollapsedEl().dom.style.visibility = 'visible';
\r
462 this.getCollapsedEl().slideIn(this.panel.slideAnchor, {duration:.2});
\r
464 this.state.collapsed = true;
\r
465 this.panel.saveState();
\r
469 beforeExpand : function(animate){
\r
470 var c = this.getCollapsedEl();
\r
472 if(this.position == 'east' || this.position == 'west'){
\r
473 this.panel.setSize(undefined, c.getHeight());
\r
475 this.panel.setSize(c.getWidth(), undefined);
\r
478 c.dom.style.visibility = 'hidden';
\r
479 this.panel.el.setStyle('z-index', 100);
\r
483 onExpand : function(){
\r
484 this.isCollapsed = false;
\r
486 this.splitEl.show();
\r
488 this.layout.layout();
\r
489 this.panel.el.setStyle('z-index', 1);
\r
490 this.state.collapsed = false;
\r
491 this.panel.saveState();
\r
495 collapseClick : function(e){
\r
497 e.stopPropagation();
\r
500 e.stopPropagation();
\r
506 onHide : function(){
\r
507 if(this.isCollapsed){
\r
508 this.getCollapsedEl().hide();
\r
509 }else if(this.splitEl){
\r
510 this.splitEl.hide();
\r
515 onShow : function(){
\r
516 if(this.isCollapsed){
\r
517 this.getCollapsedEl().show();
\r
518 }else if(this.splitEl){
\r
519 this.splitEl.show();
\r
524 * True if this region is currently visible, else false.
\r
525 * @return {Boolean}
\r
527 isVisible : function(){
\r
528 return !this.panel.hidden;
\r
532 * Returns the current margins for this region. If the region is collapsed, the cmargins (collapsed
\r
533 * margins) value will be returned, otherwise the margins value will be returned.
\r
534 * @return {Object} An object containing the element's margins: {left: (left margin), top: (top margin),
\r
535 * right: (right margin), bottom: (bottom margin)}
\r
537 getMargins : function(){
\r
538 return this.isCollapsed && this.cmargins ? this.cmargins : this.margins;
\r
542 * Returns the current size of this region. If the region is collapsed, the size of the collapsedEl will
\r
543 * be returned, otherwise the size of the region's panel will be returned.
\r
544 * @return {Object} An object containing the element's size: {width: (element width), height: (element height)}
\r
546 getSize : function(){
\r
547 return this.isCollapsed ? this.getCollapsedEl().getSize() : this.panel.getSize();
\r
551 * Sets the specified panel as the container element for this region.
\r
552 * @param {Ext.Panel} panel The new panel
\r
554 setPanel : function(panel){
\r
555 this.panel = panel;
\r
559 * Returns the minimum allowable width for this region.
\r
560 * @return {Number} The minimum width
\r
562 getMinWidth: function(){
\r
563 return this.minWidth;
\r
567 * Returns the minimum allowable height for this region.
\r
568 * @return {Number} The minimum height
\r
570 getMinHeight: function(){
\r
571 return this.minHeight;
\r
575 applyLayoutCollapsed : function(box){
\r
576 var ce = this.getCollapsedEl();
\r
577 ce.setLeftTop(box.x, box.y);
\r
578 ce.setSize(box.width, box.height);
\r
582 applyLayout : function(box){
\r
583 if(this.isCollapsed){
\r
584 this.applyLayoutCollapsed(box);
\r
586 this.panel.setPosition(box.x, box.y);
\r
587 this.panel.setSize(box.width, box.height);
\r
592 beforeSlide: function(){
\r
593 this.panel.beforeEffect();
\r
597 afterSlide : function(){
\r
598 this.panel.afterEffect();
\r
602 initAutoHide : function(){
\r
603 if(this.autoHide !== false){
\r
604 if(!this.autoHideHd){
\r
605 var st = new Ext.util.DelayedTask(this.slideIn, this);
\r
606 this.autoHideHd = {
\r
607 "mouseout": function(e){
\r
608 if(!e.within(this.el, true)){
\r
612 "mouseover" : function(e){
\r
618 this.el.on(this.autoHideHd);
\r
623 clearAutoHide : function(){
\r
624 if(this.autoHide !== false){
\r
625 this.el.un("mouseout", this.autoHideHd.mouseout);
\r
626 this.el.un("mouseover", this.autoHideHd.mouseover);
\r
631 clearMonitor : function(){
\r
632 Ext.getDoc().un("click", this.slideInIf, this);
\r
635 // these names are backwards but not changed for compat
\r
637 slideOut : function(){
\r
638 if(this.isSlid || this.el.hasActiveFx()){
\r
641 this.isSlid = true;
\r
642 var ts = this.panel.tools;
\r
643 if(ts && ts.toggle){
\r
647 if(this.position == 'east' || this.position == 'west'){
\r
648 this.panel.setSize(undefined, this.collapsedEl.getHeight());
\r
650 this.panel.setSize(this.collapsedEl.getWidth(), undefined);
\r
652 this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top];
\r
653 this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
\r
654 this.el.setStyle("z-index", 102);
\r
655 this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating');
\r
656 if(this.animFloat !== false){
\r
657 this.beforeSlide();
\r
658 this.el.slideIn(this.getSlideAnchor(), {
\r
659 callback: function(){
\r
661 this.initAutoHide();
\r
662 Ext.getDoc().on("click", this.slideInIf, this);
\r
668 this.initAutoHide();
\r
669 Ext.getDoc().on("click", this.slideInIf, this);
\r
674 afterSlideIn : function(){
\r
675 this.clearAutoHide();
\r
676 this.isSlid = false;
\r
677 this.clearMonitor();
\r
678 this.el.setStyle("z-index", "");
\r
679 this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed');
\r
680 this.el.dom.style.left = this.restoreLT[0];
\r
681 this.el.dom.style.top = this.restoreLT[1];
\r
683 var ts = this.panel.tools;
\r
684 if(ts && ts.toggle){
\r
690 slideIn : function(cb){
\r
691 if(!this.isSlid || this.el.hasActiveFx()){
\r
695 this.isSlid = false;
\r
696 if(this.animFloat !== false){
\r
697 this.beforeSlide();
\r
698 this.el.slideOut(this.getSlideAnchor(), {
\r
699 callback: function(){
\r
702 this.afterSlideIn();
\r
710 this.afterSlideIn();
\r
715 slideInIf : function(e){
\r
716 if(!e.within(this.el)){
\r
746 getAnchor : function(){
\r
747 return this.anchors[this.position];
\r
751 getCollapseAnchor : function(){
\r
752 return this.canchors[this.position];
\r
756 getSlideAnchor : function(){
\r
757 return this.sanchors[this.position];
\r
761 getAlignAdj : function(){
\r
762 var cm = this.cmargins;
\r
763 switch(this.position){
\r
780 getExpandAdj : function(){
\r
781 var c = this.collapsedEl, cm = this.cmargins;
\r
782 switch(this.position){
\r
784 return [-(cm.right+c.getWidth()+cm.left), 0];
\r
787 return [cm.right+c.getWidth()+cm.left, 0];
\r
790 return [0, -(cm.top+cm.bottom+c.getHeight())];
\r
793 return [0, cm.top+cm.bottom+c.getHeight()];
\r
800 * @class Ext.layout.BorderLayout.SplitRegion
\r
801 * @extends Ext.layout.BorderLayout.Region
\r
802 * This is a specialized type of BorderLayout region that has a built-in {@link Ext.SplitBar} for user resizing of regions.
\r
804 * Create a new SplitRegion.
\r
805 * @param {Layout} layout Any valid Ext layout class
\r
806 * @param {Object} config The configuration options
\r
807 * @param {String} position The region position. Valid values are: north, south, east, west and center. Every
\r
808 * BorderLayout must have a center region for the primary content -- all other regions are optional.
\r
810 Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){
\r
811 Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos);
\r
813 this.applyLayout = this.applyFns[pos];
\r
816 Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, {
\r
818 * @cfg {String} splitTip
\r
819 * The tooltip to display when the user hovers over a non-collapsible region's split bar (defaults to "Drag
\r
820 * to resize."). Only applies if {@link #useSplitTips} = true.
\r
822 splitTip : "Drag to resize.",
\r
824 * @cfg {String} collapsibleSplitTip
\r
825 * The tooltip to display when the user hovers over a collapsible region's split bar (defaults to "Drag
\r
826 * to resize. Double click to hide."). Only applies if {@link #useSplitTips} = true.
\r
828 collapsibleSplitTip : "Drag to resize. Double click to hide.",
\r
830 * @cfg {Boolean} useSplitTips
\r
831 * True to display a tooltip when the user hovers over a region's split bar (defaults to false). The tooltip
\r
832 * text will be the value of either {@link #splitTip} or {@link #collapsibleSplitTip} as appropriate.
\r
834 useSplitTips : false,
\r
839 orientation: Ext.SplitBar.VERTICAL,
\r
840 placement: Ext.SplitBar.TOP,
\r
841 maxFn : 'getVMaxSize',
\r
842 minProp: 'minHeight',
\r
843 maxProp: 'maxHeight'
\r
846 orientation: Ext.SplitBar.VERTICAL,
\r
847 placement: Ext.SplitBar.BOTTOM,
\r
848 maxFn : 'getVMaxSize',
\r
849 minProp: 'minHeight',
\r
850 maxProp: 'maxHeight'
\r
853 orientation: Ext.SplitBar.HORIZONTAL,
\r
854 placement: Ext.SplitBar.RIGHT,
\r
855 maxFn : 'getHMaxSize',
\r
856 minProp: 'minWidth',
\r
857 maxProp: 'maxWidth'
\r
860 orientation: Ext.SplitBar.HORIZONTAL,
\r
861 placement: Ext.SplitBar.LEFT,
\r
862 maxFn : 'getHMaxSize',
\r
863 minProp: 'minWidth',
\r
864 maxProp: 'maxWidth'
\r
870 west : function(box){
\r
871 if(this.isCollapsed){
\r
872 return this.applyLayoutCollapsed(box);
\r
874 var sd = this.splitEl.dom, s = sd.style;
\r
875 this.panel.setPosition(box.x, box.y);
\r
876 var sw = sd.offsetWidth;
\r
877 s.left = (box.x+box.width-sw)+'px';
\r
878 s.top = (box.y)+'px';
\r
879 s.height = Math.max(0, box.height)+'px';
\r
880 this.panel.setSize(box.width-sw, box.height);
\r
882 east : function(box){
\r
883 if(this.isCollapsed){
\r
884 return this.applyLayoutCollapsed(box);
\r
886 var sd = this.splitEl.dom, s = sd.style;
\r
887 var sw = sd.offsetWidth;
\r
888 this.panel.setPosition(box.x+sw, box.y);
\r
889 s.left = (box.x)+'px';
\r
890 s.top = (box.y)+'px';
\r
891 s.height = Math.max(0, box.height)+'px';
\r
892 this.panel.setSize(box.width-sw, box.height);
\r
894 north : function(box){
\r
895 if(this.isCollapsed){
\r
896 return this.applyLayoutCollapsed(box);
\r
898 var sd = this.splitEl.dom, s = sd.style;
\r
899 var sh = sd.offsetHeight;
\r
900 this.panel.setPosition(box.x, box.y);
\r
901 s.left = (box.x)+'px';
\r
902 s.top = (box.y+box.height-sh)+'px';
\r
903 s.width = Math.max(0, box.width)+'px';
\r
904 this.panel.setSize(box.width, box.height-sh);
\r
906 south : function(box){
\r
907 if(this.isCollapsed){
\r
908 return this.applyLayoutCollapsed(box);
\r
910 var sd = this.splitEl.dom, s = sd.style;
\r
911 var sh = sd.offsetHeight;
\r
912 this.panel.setPosition(box.x, box.y+sh);
\r
913 s.left = (box.x)+'px';
\r
914 s.top = (box.y)+'px';
\r
915 s.width = Math.max(0, box.width)+'px';
\r
916 this.panel.setSize(box.width, box.height-sh);
\r
921 render : function(ct, p){
\r
922 Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p);
\r
924 var ps = this.position;
\r
926 this.splitEl = ct.createChild({
\r
927 cls: "x-layout-split x-layout-split-"+ps, html: " ",
\r
928 id: this.panel.id + '-xsplit'
\r
931 if(this.collapseMode == 'mini'){
\r
932 this.miniSplitEl = this.splitEl.createChild({
\r
933 cls: "x-layout-mini x-layout-mini-"+ps, html: " "
\r
935 this.miniSplitEl.addClassOnOver('x-layout-mini-over');
\r
936 this.miniSplitEl.on('click', this.onCollapseClick, this, {stopEvent:true});
\r
939 var s = this.splitSettings[ps];
\r
941 this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation);
\r
942 this.split.placement = s.placement;
\r
943 this.split.getMaximumSize = this[s.maxFn].createDelegate(this);
\r
944 this.split.minSize = this.minSize || this[s.minProp];
\r
945 this.split.on("beforeapply", this.onSplitMove, this);
\r
946 this.split.useShim = this.useShim === true;
\r
947 this.maxSize = this.maxSize || this[s.maxProp];
\r
950 this.splitEl.hide();
\r
953 if(this.useSplitTips){
\r
954 this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip;
\r
956 if(this.collapsible){
\r
957 this.splitEl.on("dblclick", this.onCollapseClick, this);
\r
961 //docs inherit from superclass
\r
962 getSize : function(){
\r
963 if(this.isCollapsed){
\r
964 return this.collapsedEl.getSize();
\r
966 var s = this.panel.getSize();
\r
967 if(this.position == 'north' || this.position == 'south'){
\r
968 s.height += this.splitEl.dom.offsetHeight;
\r
970 s.width += this.splitEl.dom.offsetWidth;
\r
976 getHMaxSize : function(){
\r
977 var cmax = this.maxSize || 10000;
\r
978 var center = this.layout.center;
\r
979 return Math.min(cmax, (this.el.getWidth()+center.el.getWidth())-center.getMinWidth());
\r
983 getVMaxSize : function(){
\r
984 var cmax = this.maxSize || 10000;
\r
985 var center = this.layout.center;
\r
986 return Math.min(cmax, (this.el.getHeight()+center.el.getHeight())-center.getMinHeight());
\r
990 onSplitMove : function(split, newSize){
\r
991 var s = this.panel.getSize();
\r
992 this.lastSplitSize = newSize;
\r
993 if(this.position == 'north' || this.position == 'south'){
\r
994 this.panel.setSize(s.width, newSize);
\r
995 this.state.height = newSize;
\r
997 this.panel.setSize(newSize, s.height);
\r
998 this.state.width = newSize;
\r
1000 this.layout.layout();
\r
1001 this.panel.saveState();
\r
1006 * Returns a reference to the split bar in use by this region.
\r
1007 * @return {Ext.SplitBar} The split bar
\r
1009 getSplitBar : function(){
\r
1010 return this.split;
\r
1014 destroy : function() {
\r
1016 this.miniSplitEl,
\r
1023 Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;