X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/widgets/layout/BorderLayout.js diff --git a/src/widgets/layout/BorderLayout.js b/src/widgets/layout/BorderLayout.js deleted file mode 100644 index 4fbd0deb..00000000 --- a/src/widgets/layout/BorderLayout.js +++ /dev/null @@ -1,1108 +0,0 @@ -/*! - * Ext JS Library 3.0.3 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license - */ -/** - * @class Ext.layout.BorderLayout - * @extends Ext.layout.ContainerLayout - *
This is a multi-pane, application-oriented UI layout style that supports multiple - * nested panels, automatic {@link Ext.layout.BorderLayout.Region#split split} bars between - * {@link Ext.layout.BorderLayout.Region#BorderLayout.Region regions} and built-in - * {@link Ext.layout.BorderLayout.Region#collapsible expanding and collapsing} of regions.
- *This class is intended to be extended or created via the layout:'border' - * {@link Ext.Container#layout} config, and should generally not need to be created directly - * via the new keyword.
- *BorderLayout does not have any direct config options (other than inherited ones). - * All configuration options available for customizing the BorderLayout are at the - * {@link Ext.layout.BorderLayout.Region} and {@link Ext.layout.BorderLayout.SplitRegion} - * levels.
- *Example usage:
- *
-var myBorderPanel = new Ext.Panel({
- {@link Ext.Component#renderTo renderTo}: document.body,
- {@link Ext.BoxComponent#width width}: 700,
- {@link Ext.BoxComponent#height height}: 500,
- {@link Ext.Panel#title title}: 'Border Layout',
- {@link Ext.Container#layout layout}: 'border',
- {@link Ext.Container#items items}: [{
- {@link Ext.Panel#title title}: 'South Region is resizable',
- {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south', // position for region
- {@link Ext.BoxComponent#height height}: 100,
- {@link Ext.layout.BorderLayout.Region#split split}: true, // enable resizing
- {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50}
- {@link Ext.SplitBar#maxSize maxSize}: 150,
- {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5'
- },{
- // xtype: 'panel' implied by default
- {@link Ext.Panel#title title}: 'West Region is collapsible',
- {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}:'west',
- {@link Ext.layout.BorderLayout.Region#margins margins}: '5 0 0 5',
- {@link Ext.BoxComponent#width width}: 200,
- {@link Ext.layout.BorderLayout.Region#collapsible collapsible}: true, // make collapsible
- {@link Ext.layout.BorderLayout.Region#cmargins cmargins}: '5 5 0 5', // adjust top margin when collapsed
- {@link Ext.Component#id id}: 'west-region-container',
- {@link Ext.Container#layout layout}: 'fit',
- {@link Ext.Panel#unstyled unstyled}: true
- },{
- {@link Ext.Panel#title title}: 'Center Region',
- {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'center', // center region is required, no width/height specified
- {@link Ext.Component#xtype xtype}: 'container',
- {@link Ext.Container#layout layout}: 'fit',
- {@link Ext.layout.BorderLayout.Region#margins margins}: '5 5 0 0'
- }]
-});
-
- * Notes:
-wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container');
-wrc.{@link Ext.Panel#removeAll removeAll}();
-wrc.{@link Ext.Container#add add}({
- title: 'Added Panel',
- html: 'Some content'
-});
-wrc.{@link Ext.Container#doLayout doLayout}();
- *
-wr = myBorderPanel.layout.west;
- *
This is a region of a {@link Ext.layout.BorderLayout BorderLayout} that acts as a subcontainer - * within the layout. Each region has its own {@link Ext.layout.ContainerLayout layout} that is - * independent of other regions and the containing BorderLayout, and can be any of the - * {@link Ext.layout.ContainerLayout valid Ext layout types}.
- *Region size is managed automatically and cannot be changed by the user -- for - * {@link #split resizable regions}, see {@link Ext.layout.BorderLayout.SplitRegion}.
- * @constructor - * Create a new Region. - * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. - * @param {Object} config The configuration options - * @param {String} position The region position. Valid values are: north, south, - * east, west and center. Every {@link Ext.layout.BorderLayout BorderLayout} - * must have a center region for the primary content -- all other regions are optional. - */ -Ext.layout.BorderLayout.Region = function(layout, config, pos){ - Ext.apply(this, config); - this.layout = layout; - this.position = pos; - this.state = {}; - if(typeof this.margins == 'string'){ - this.margins = this.layout.parseMargins(this.margins); - } - this.margins = Ext.applyIf(this.margins || {}, this.defaultMargins); - if(this.collapsible){ - if(typeof this.cmargins == 'string'){ - this.cmargins = this.layout.parseMargins(this.cmargins); - } - if(this.collapseMode == 'mini' && !this.cmargins){ - this.cmargins = {left:0,top:0,right:0,bottom:0}; - }else{ - this.cmargins = Ext.applyIf(this.cmargins || {}, - pos == 'north' || pos == 'south' ? this.defaultNSCMargins : this.defaultEWCMargins); - } - } -}; - -Ext.layout.BorderLayout.Region.prototype = { - /** - * @cfg {Boolean} animFloat - * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated - * panel that will close again once the user mouses out of that panel (or clicks out if - * {@link #autoHide} = false). Setting {@link #animFloat} = false will - * prevent the open and close of these floated panels from being animated (defaults to true). - */ - /** - * @cfg {Boolean} autoHide - * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated - * panel. If autoHide = true, the panel will automatically hide after the user mouses - * out of the panel. If autoHide = false, the panel will continue to display until the - * user clicks outside of the panel (defaults to true). - */ - /** - * @cfg {String} collapseMode - * collapseMode supports two configuration values:Note: if a collapsible region does not have a title bar, then set collapseMode = - * 'mini' and {@link #split} = true in order for the region to be {@link #collapsible} - * by the user as the expand/collapse tool button (that would go in the title bar) will not be rendered.
- *See also {@link #cmargins}.
- */ - /** - * @cfg {Object} margins - * An object containing margins to apply to the region when in the expanded state in the - * format:
-{
- top: (top margin),
- right: (right margin),
- bottom: (bottom margin),
- left: (left margin)
-}
- * May also be a string containing space-separated, numeric margin values. The order of the - * sides associated with each value matches the way CSS processes margin values:
- *Defaults to:
- * {top:0, right:0, bottom:0, left:0}
- *
- */
- /**
- * @cfg {Object} cmargins
- * An object containing margins to apply to the region when in the collapsed state in the
- * format:
-{
- top: (top margin),
- right: (right margin),
- bottom: (bottom margin),
- left: (left margin)
-}
- * May also be a string containing space-separated, numeric margin values. The order of the - * sides associated with each value matches the way CSS processes margin values.
- *true to allow the user to collapse this region (defaults to false). If - * true, an expand/collapse tool button will automatically be rendered into the title - * bar of the region, otherwise the button will not be shown.
- *Note: that a title bar is required to display the collapse/expand toggle button -- if - * no title is specified for the region's panel, the region will only be collapsible if - * {@link #collapseMode} = 'mini' and {@link #split} = true. - */ - collapsible : false, - /** - * @cfg {Boolean} split - *
true to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and - * display a 5px wide {@link Ext.SplitBar} between this region and its neighbor, allowing the user to - * resize the regions dynamically. Defaults to false creating a - * {@link Ext.layout.BorderLayout.Region Region}.
Notes:
The minimum allowable width in pixels for this region (defaults to 50). - * maxWidth may also be specified.
Note: setting the {@link Ext.SplitBar#minSize minSize} / - * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified - * minWidth / maxWidth.
- */ - minWidth:50, - /** - * @cfg {Number} minHeight - * The minimum allowable height in pixels for this region (defaults to 50) - * maxHeight may also be specified.Note: setting the {@link Ext.SplitBar#minSize minSize} / - * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified - * minHeight / maxHeight.
- */ - minHeight:50, - - // private - defaultMargins : {left:0,top:0,right:0,bottom:0}, - // private - defaultNSCMargins : {left:5,top:5,right:5,bottom:5}, - // private - defaultEWCMargins : {left:5,top:0,right:5,bottom:0}, - floatingZIndex: 100, - - /** - * True if this region is collapsed. Read-only. - * @type Boolean - * @property - */ - isCollapsed : false, - - /** - * This region's panel. Read-only. - * @type Ext.Panel - * @property panel - */ - /** - * This region's layout. Read-only. - * @type Layout - * @property layout - */ - /** - * This region's layout position (north, south, east, west or center). Read-only. - * @type String - * @property position - */ - - // private - render : function(ct, p){ - this.panel = p; - p.el.enableDisplayMode(); - this.targetEl = ct; - this.el = p.el; - - var gs = p.getState, ps = this.position; - p.getState = function(){ - return Ext.apply(gs.call(p) || {}, this.state); - }.createDelegate(this); - - if(ps != 'center'){ - p.allowQueuedExpand = false; - p.on({ - beforecollapse: this.beforeCollapse, - collapse: this.onCollapse, - beforeexpand: this.beforeExpand, - expand: this.onExpand, - hide: this.onHide, - show: this.onShow, - scope: this - }); - if(this.collapsible || this.floatable){ - p.collapseEl = 'el'; - p.slideAnchor = this.getSlideAnchor(); - } - if(p.tools && p.tools.toggle){ - p.tools.toggle.addClass('x-tool-collapse-'+ps); - p.tools.toggle.addClassOnOver('x-tool-collapse-'+ps+'-over'); - } - } - }, - - // private - getCollapsedEl : function(){ - if(!this.collapsedEl){ - if(!this.toolTemplate){ - var tt = new Ext.Template( - 'This is a specialized type of {@link Ext.layout.BorderLayout.Region BorderLayout region} that - * has a built-in {@link Ext.SplitBar} for user resizing of regions. The movement of the split bar - * is configurable to move either {@link #tickSize smooth or incrementally}.
- * @constructor - * Create a new SplitRegion. - * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. - * @param {Object} config The configuration options - * @param {String} position The region position. Valid values are: north, south, east, west and center. Every - * BorderLayout must have a center region for the primary content -- all other regions are optional. - */ -Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){ - Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos); - // prevent switch - this.applyLayout = this.applyFns[pos]; -}; - -Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, { - /** - * @cfg {Number} tickSize - * The increment, in pixels by which to move this Region's {@link Ext.SplitBar SplitBar}. - * By default, the {@link Ext.SplitBar SplitBar} moves smoothly. - */ - /** - * @cfg {String} splitTip - * The tooltip to display when the user hovers over a - * {@link Ext.layout.BorderLayout.Region#collapsible non-collapsible} region's split bar - * (defaults to "Drag to resize."). Only applies if - * {@link #useSplitTips} = true. - */ - splitTip : "Drag to resize.", - /** - * @cfg {String} collapsibleSplitTip - * The tooltip to display when the user hovers over a - * {@link Ext.layout.BorderLayout.Region#collapsible collapsible} region's split bar - * (defaults to "Drag to resize. Double click to hide."). Only applies if - * {@link #useSplitTips} = true. - */ - collapsibleSplitTip : "Drag to resize. Double click to hide.", - /** - * @cfg {Boolean} useSplitTips - * true to display a tooltip when the user hovers over a region's split bar - * (defaults to false). The tooltip text will be the value of either - * {@link #splitTip} or {@link #collapsibleSplitTip} as appropriate. - */ - useSplitTips : false, - - // private - splitSettings : { - north : { - orientation: Ext.SplitBar.VERTICAL, - placement: Ext.SplitBar.TOP, - maxFn : 'getVMaxSize', - minProp: 'minHeight', - maxProp: 'maxHeight' - }, - south : { - orientation: Ext.SplitBar.VERTICAL, - placement: Ext.SplitBar.BOTTOM, - maxFn : 'getVMaxSize', - minProp: 'minHeight', - maxProp: 'maxHeight' - }, - east : { - orientation: Ext.SplitBar.HORIZONTAL, - placement: Ext.SplitBar.RIGHT, - maxFn : 'getHMaxSize', - minProp: 'minWidth', - maxProp: 'maxWidth' - }, - west : { - orientation: Ext.SplitBar.HORIZONTAL, - placement: Ext.SplitBar.LEFT, - maxFn : 'getHMaxSize', - minProp: 'minWidth', - maxProp: 'maxWidth' - } - }, - - // private - applyFns : { - west : function(box){ - if(this.isCollapsed){ - return this.applyLayoutCollapsed(box); - } - var sd = this.splitEl.dom, s = sd.style; - this.panel.setPosition(box.x, box.y); - var sw = sd.offsetWidth; - s.left = (box.x+box.width-sw)+'px'; - s.top = (box.y)+'px'; - s.height = Math.max(0, box.height)+'px'; - this.panel.setSize(box.width-sw, box.height); - }, - east : function(box){ - if(this.isCollapsed){ - return this.applyLayoutCollapsed(box); - } - var sd = this.splitEl.dom, s = sd.style; - var sw = sd.offsetWidth; - this.panel.setPosition(box.x+sw, box.y); - s.left = (box.x)+'px'; - s.top = (box.y)+'px'; - s.height = Math.max(0, box.height)+'px'; - this.panel.setSize(box.width-sw, box.height); - }, - north : function(box){ - if(this.isCollapsed){ - return this.applyLayoutCollapsed(box); - } - var sd = this.splitEl.dom, s = sd.style; - var sh = sd.offsetHeight; - this.panel.setPosition(box.x, box.y); - s.left = (box.x)+'px'; - s.top = (box.y+box.height-sh)+'px'; - s.width = Math.max(0, box.width)+'px'; - this.panel.setSize(box.width, box.height-sh); - }, - south : function(box){ - if(this.isCollapsed){ - return this.applyLayoutCollapsed(box); - } - var sd = this.splitEl.dom, s = sd.style; - var sh = sd.offsetHeight; - this.panel.setPosition(box.x, box.y+sh); - s.left = (box.x)+'px'; - s.top = (box.y)+'px'; - s.width = Math.max(0, box.width)+'px'; - this.panel.setSize(box.width, box.height-sh); - } - }, - - // private - render : function(ct, p){ - Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p); - - var ps = this.position; - - this.splitEl = ct.createChild({ - cls: "x-layout-split x-layout-split-"+ps, html: " ", - id: this.panel.id + '-xsplit' - }); - - if(this.collapseMode == 'mini'){ - this.miniSplitEl = this.splitEl.createChild({ - cls: "x-layout-mini x-layout-mini-"+ps, html: " " - }); - this.miniSplitEl.addClassOnOver('x-layout-mini-over'); - this.miniSplitEl.on('click', this.onCollapseClick, this, {stopEvent:true}); - } - - var s = this.splitSettings[ps]; - - this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation); - this.split.tickSize = this.tickSize; - this.split.placement = s.placement; - this.split.getMaximumSize = this[s.maxFn].createDelegate(this); - this.split.minSize = this.minSize || this[s.minProp]; - this.split.on("beforeapply", this.onSplitMove, this); - this.split.useShim = this.useShim === true; - this.maxSize = this.maxSize || this[s.maxProp]; - - if(p.hidden){ - this.splitEl.hide(); - } - - if(this.useSplitTips){ - this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip; - } - if(this.collapsible){ - this.splitEl.on("dblclick", this.onCollapseClick, this); - } - }, - - //docs inherit from superclass - getSize : function(){ - if(this.isCollapsed){ - return this.collapsedEl.getSize(); - } - var s = this.panel.getSize(); - if(this.position == 'north' || this.position == 'south'){ - s.height += this.splitEl.dom.offsetHeight; - }else{ - s.width += this.splitEl.dom.offsetWidth; - } - return s; - }, - - // private - getHMaxSize : function(){ - var cmax = this.maxSize || 10000; - var center = this.layout.center; - return Math.min(cmax, (this.el.getWidth()+center.el.getWidth())-center.getMinWidth()); - }, - - // private - getVMaxSize : function(){ - var cmax = this.maxSize || 10000; - var center = this.layout.center; - return Math.min(cmax, (this.el.getHeight()+center.el.getHeight())-center.getMinHeight()); - }, - - // private - onSplitMove : function(split, newSize){ - var s = this.panel.getSize(); - this.lastSplitSize = newSize; - if(this.position == 'north' || this.position == 'south'){ - this.panel.setSize(s.width, newSize); - this.state.height = newSize; - }else{ - this.panel.setSize(newSize, s.height); - this.state.width = newSize; - } - this.layout.layout(); - this.panel.saveState(); - return false; - }, - - /** - * Returns a reference to the split bar in use by this region. - * @return {Ext.SplitBar} The split bar - */ - getSplitBar : function(){ - return this.split; - }, - - // inherit docs - destroy : function() { - Ext.destroy( - this.miniSplitEl, - this.split, - this.splitEl - ); - } -}); - -Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout; \ No newline at end of file