+++ /dev/null
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-/**\r
- * @class Ext.layout.BorderLayout\r
- * @extends Ext.layout.ContainerLayout\r
- * <p>This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic\r
- * split bars between regions and built-in expanding and collapsing of regions.\r
- * This class is intended to be extended or created via the layout:'border' {@link Ext.Container#layout} config,\r
- * and should generally not need to be created directly via the new keyword.</p>\r
- * <p>BorderLayout does not have any direct config options (other than inherited ones). All configs available\r
- * for customizing the BorderLayout are at the {@link Ext.layout.BorderLayout.Region} and\r
- * {@link Ext.layout.BorderLayout.SplitRegion} levels.</p>\r
- * <p><b>The regions of a BorderLayout are fixed at render time and thereafter, no regions may be removed or\r
- * added. The BorderLayout must have a center region, which will always fill the remaining space not used by\r
- * the other regions in the layout.</b></p>\r
- * <p>Example usage:</p>\r
- * <pre><code>\r
-var border = new Ext.Panel({\r
- title: 'Border Layout',\r
- layout:'border',\r
- items: [{\r
- title: 'South Panel',\r
- region: 'south',\r
- height: 100,\r
- minSize: 75,\r
- maxSize: 250,\r
- margins: '0 5 5 5'\r
- },{\r
- title: 'West Panel',\r
- region:'west',\r
- margins: '5 0 0 5',\r
- cmargins: '5 5 0 5',\r
- width: 200,\r
- minSize: 100,\r
- maxSize: 300\r
- },{\r
- title: 'Main Content',\r
- region:'center',\r
- margins: '5 5 0 0'\r
- }]\r
-});\r
-</code></pre>\r
- */\r
-Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, {\r
- // private\r
- monitorResize:true,\r
- // private\r
- rendered : false,\r
-\r
- // private\r
- onLayout : function(ct, target){\r
- var collapsed;\r
- if(!this.rendered){\r
- target.position();\r
- target.addClass('x-border-layout-ct');\r
- var items = ct.items.items;\r
- collapsed = [];\r
- for(var i = 0, len = items.length; i < len; i++) {\r
- var c = items[i];\r
- var pos = c.region;\r
- if(c.collapsed){\r
- collapsed.push(c);\r
- }\r
- c.collapsed = false;\r
- if(!c.rendered){\r
- c.cls = c.cls ? c.cls +' x-border-panel' : 'x-border-panel';\r
- c.render(target, i);\r
- }\r
- this[pos] = pos != 'center' && c.split ?\r
- new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :\r
- new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos);\r
- this[pos].render(target, c);\r
- }\r
- this.rendered = true;\r
- }\r
-\r
- var size = target.getViewSize();\r
- if(size.width < 20 || size.height < 20){ // display none?\r
- if(collapsed){\r
- this.restoreCollapsed = collapsed;\r
- }\r
- return;\r
- }else if(this.restoreCollapsed){\r
- collapsed = this.restoreCollapsed;\r
- delete this.restoreCollapsed;\r
- }\r
-\r
- var w = size.width, h = size.height;\r
- var centerW = w, centerH = h, centerY = 0, centerX = 0;\r
-\r
- var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center;\r
- if(!c && Ext.layout.BorderLayout.WARN !== false){\r
- throw 'No center region defined in BorderLayout ' + ct.id;\r
- }\r
-\r
- if(n && n.isVisible()){\r
- var b = n.getSize();\r
- var m = n.getMargins();\r
- b.width = w - (m.left+m.right);\r
- b.x = m.left;\r
- b.y = m.top;\r
- centerY = b.height + b.y + m.bottom;\r
- centerH -= centerY;\r
- n.applyLayout(b);\r
- }\r
- if(s && s.isVisible()){\r
- var b = s.getSize();\r
- var m = s.getMargins();\r
- b.width = w - (m.left+m.right);\r
- b.x = m.left;\r
- var totalHeight = (b.height + m.top + m.bottom);\r
- b.y = h - totalHeight + m.top;\r
- centerH -= totalHeight;\r
- s.applyLayout(b);\r
- }\r
- if(west && west.isVisible()){\r
- var b = west.getSize();\r
- var m = west.getMargins();\r
- b.height = centerH - (m.top+m.bottom);\r
- b.x = m.left;\r
- b.y = centerY + m.top;\r
- var totalWidth = (b.width + m.left + m.right);\r
- centerX += totalWidth;\r
- centerW -= totalWidth;\r
- west.applyLayout(b);\r
- }\r
- if(e && e.isVisible()){\r
- var b = e.getSize();\r
- var m = e.getMargins();\r
- b.height = centerH - (m.top+m.bottom);\r
- var totalWidth = (b.width + m.left + m.right);\r
- b.x = w - totalWidth + m.left;\r
- b.y = centerY + m.top;\r
- centerW -= totalWidth;\r
- e.applyLayout(b);\r
- }\r
-\r
- if(c){\r
- var m = c.getMargins();\r
- var centerBox = {\r
- x: centerX + m.left,\r
- y: centerY + m.top,\r
- width: centerW - (m.left+m.right),\r
- height: centerH - (m.top+m.bottom)\r
- };\r
- c.applyLayout(centerBox);\r
- }\r
- if(collapsed){\r
- for(var i = 0, len = collapsed.length; i < len; i++){\r
- collapsed[i].collapse(false);\r
- }\r
- }\r
-\r
- if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue\r
- target.repaint();\r
- }\r
- },\r
-\r
- // inherit docs\r
- destroy: function() {\r
- var r = ['north', 'south', 'east', 'west'];\r
- for (var i = 0; i < r.length; i++) {\r
- var region = this[r[i]];\r
- if(region){\r
- if(region.destroy){\r
- region.destroy();\r
- }else if (region.split){\r
- region.split.destroy(true);\r
- }\r
- }\r
- }\r
- Ext.layout.BorderLayout.superclass.destroy.call(this);\r
- }\r
- \r
- /**\r
- * @property activeItem\r
- * @hide\r
- */\r
-});\r
-\r
-/**\r
- * @class Ext.layout.BorderLayout.Region\r
- * This is a region of a BorderLayout that acts as a subcontainer within the layout. Each region has its own\r
- * layout that is independent of other regions and the containing BorderLayout, and can be any of the valid\r
- * Ext layout types. Region size is managed automatically and cannot be changed by the user -- for resizable\r
- * regions, see {@link Ext.layout.BorderLayout.SplitRegion}.\r
- * @constructor\r
- * Create a new Region.\r
- * @param {Layout} layout Any valid Ext layout class\r
- * @param {Object} config The configuration options\r
- * @param {String} position The region position. Valid values are: north, south, east, west and center. Every\r
- * BorderLayout must have a center region for the primary content -- all other regions are optional.\r
- */\r
-Ext.layout.BorderLayout.Region = function(layout, config, pos){\r
- Ext.apply(this, config);\r
- this.layout = layout;\r
- this.position = pos;\r
- this.state = {};\r
- if(typeof this.margins == 'string'){\r
- this.margins = this.layout.parseMargins(this.margins);\r
- }\r
- this.margins = Ext.applyIf(this.margins || {}, this.defaultMargins);\r
- if(this.collapsible){\r
- if(typeof this.cmargins == 'string'){\r
- this.cmargins = this.layout.parseMargins(this.cmargins);\r
- }\r
- if(this.collapseMode == 'mini' && !this.cmargins){\r
- this.cmargins = {left:0,top:0,right:0,bottom:0};\r
- }else{\r
- this.cmargins = Ext.applyIf(this.cmargins || {},\r
- pos == 'north' || pos == 'south' ? this.defaultNSCMargins : this.defaultEWCMargins);\r
- }\r
- }\r
-};\r
-\r
-Ext.layout.BorderLayout.Region.prototype = {\r
- /**\r
- * @cfg {Boolean} animFloat\r
- * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated panel that will\r
- * close again once the user mouses out of that panel (or clicks out if autoHide = false). Setting animFloat\r
- * to false will prevent the open and close of these floated panels from being animated (defaults to true).\r
- */\r
- /**\r
- * @cfg {Boolean} autoHide\r
- * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated panel. If\r
- * autoHide is true, the panel will automatically hide after the user mouses out of the panel. If autoHide\r
- * is false, the panel will continue to display until the user clicks outside of the panel (defaults to true).\r
- */\r
- /**\r
- * @cfg {Boolean} collapsed\r
- * By default, collapsible regions will be visible when rendered. Set the collapsed config to true to render\r
- * the region as collapsed.\r
- */\r
- /**\r
- * @cfg {String} collapseMode\r
- * By default, collapsible regions are collapsed by clicking the expand/collapse tool button that renders into\r
- * the region's title bar. Optionally, when collapseMode is set to 'mini' the region's split bar will also\r
- * display a small collapse button in the center of the bar. In 'mini' mode the region will collapse to a\r
- * thinner bar than in normal mode. By default collapseMode is undefined, and the only two supported values\r
- * are undefined and 'mini'. Note that if a collapsible region does not have a title bar, then collapseMode\r
- * must be set to 'mini' in order for the region to be collapsible by the user as the tool button will not\r
- * be rendered.\r
- */\r
- /**\r
- * @cfg {Object} margins\r
- * An object containing margins to apply to the region when in the expanded state in the format:<pre><code>\r
-{\r
- top: (top margin),\r
- right: (right margin),\r
- bottom: (bottom margin)\r
- left: (left margin),\r
-}</code></pre>\r
- * <p>May also be a string containing space-separated, numeric margin values. The order of the sides associated\r
- * with each value matches the way CSS processes margin values:</p>\r
- * <p><ul>\r
- * <li>If there is only one value, it applies to all sides.</li>\r
- * <li>If there are two values, the top and bottom borders are set to the first value and the right\r
- * and left are set to the second.</li>\r
- * <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
- * is set to the third.</li>\r
- * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>\r
- * </ul></p>\r
- */\r
- /**\r
- * @cfg {Object} cmargins\r
- * An object containing margins to apply to the region when in the collapsed state in the format:<pre><code>\r
-{\r
- top: (top margin),\r
- right: (right margin),\r
- bottom: (bottom margin)\r
- left: (left margin),\r
-}</code></pre>\r
- * <p>May also be a string containing space-separated, numeric margin values. The order of the sides associated\r
- * with each value matches the way CSS processes margin values.</p>\r
- * <p><ul>\r
- * <li>If there is only one value, it applies to all sides.</li>\r
- * <li>If there are two values, the top and bottom borders are set to the first value and the right\r
- * and left are set to the second.</li>\r
- * <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
- * is set to the third.</li>\r
- * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li>\r
- * </ul></p>\r
- */\r
- /**\r
- * @cfg {Boolean} collapsible\r
- * True to allow the user to collapse this region (defaults to false). If true, an expand/collapse tool button\r
- * will automatically be rendered into the title bar of the region, otherwise the button will not be shown.\r
- * Note that a title bar is required to display the toggle button -- if no region title is specified, the\r
- * region will only be collapsible if {@link #collapseMode} is set to 'mini'.\r
- */\r
- collapsible : false,\r
- /**\r
- * @cfg {Boolean} split\r
- * True to display a {@link Ext.SplitBar} between this region and its neighbor, allowing the user to resize\r
- * the regions dynamically (defaults to false). When split == true, it is common to specify a minSize\r
- * and maxSize for the BoxComponent representing the region. These are not native configs of BoxComponent, and\r
- * are used only by this class.\r
- */\r
- split:false,\r
- /**\r
- * @cfg {Boolean} floatable\r
- * True to allow clicking a collapsed region's bar to display the region's panel floated above the layout,\r
- * false to force the user to fully expand a collapsed region by clicking the expand button to see it again\r
- * (defaults to true).\r
- */\r
- floatable: true,\r
- /**\r
- * @cfg {Number} minWidth\r
- * The minimum allowable width in pixels for this region (defaults to 50)\r
- */\r
- minWidth:50,\r
- /**\r
- * @cfg {Number} minHeight\r
- * The minimum allowable height in pixels for this region (defaults to 50)\r
- */\r
- minHeight:50,\r
-\r
- // private\r
- defaultMargins : {left:0,top:0,right:0,bottom:0},\r
- // private\r
- defaultNSCMargins : {left:5,top:5,right:5,bottom:5},\r
- // private\r
- defaultEWCMargins : {left:5,top:0,right:5,bottom:0},\r
-\r
- /**\r
- * True if this region is collapsed. Read-only.\r
- * @type Boolean\r
- * @property\r
- */\r
- isCollapsed : false,\r
-\r
- /**\r
- * This region's panel. Read-only.\r
- * @type Ext.Panel\r
- * @property panel\r
- */\r
- /**\r
- * This region's layout. Read-only.\r
- * @type Layout\r
- * @property layout\r
- */\r
- /**\r
- * This region's layout position (north, south, east, west or center). Read-only.\r
- * @type String\r
- * @property position\r
- */\r
-\r
- // private\r
- render : function(ct, p){\r
- this.panel = p;\r
- p.el.enableDisplayMode();\r
- this.targetEl = ct;\r
- this.el = p.el;\r
-\r
- var gs = p.getState, ps = this.position;\r
- p.getState = function(){\r
- return Ext.apply(gs.call(p) || {}, this.state);\r
- }.createDelegate(this);\r
-\r
- if(ps != 'center'){\r
- p.allowQueuedExpand = false;\r
- p.on({\r
- beforecollapse: this.beforeCollapse,\r
- collapse: this.onCollapse,\r
- beforeexpand: this.beforeExpand,\r
- expand: this.onExpand,\r
- hide: this.onHide,\r
- show: this.onShow,\r
- scope: this\r
- });\r
- if(this.collapsible){\r
- p.collapseEl = 'el';\r
- p.slideAnchor = this.getSlideAnchor();\r
- }\r
- if(p.tools && p.tools.toggle){\r
- p.tools.toggle.addClass('x-tool-collapse-'+ps);\r
- p.tools.toggle.addClassOnOver('x-tool-collapse-'+ps+'-over');\r
- }\r
- }\r
- },\r
-\r
- // private\r
- getCollapsedEl : function(){\r
- if(!this.collapsedEl){\r
- if(!this.toolTemplate){\r
- var tt = new Ext.Template(\r
- '<div class="x-tool x-tool-{id}"> </div>'\r
- );\r
- tt.disableFormats = true;\r
- tt.compile();\r
- Ext.layout.BorderLayout.Region.prototype.toolTemplate = tt;\r
- }\r
- this.collapsedEl = this.targetEl.createChild({\r
- cls: "x-layout-collapsed x-layout-collapsed-"+this.position,\r
- id: this.panel.id + '-xcollapsed'\r
- });\r
- this.collapsedEl.enableDisplayMode('block');\r
-\r
- if(this.collapseMode == 'mini'){\r
- this.collapsedEl.addClass('x-layout-cmini-'+this.position);\r
- this.miniCollapsedEl = this.collapsedEl.createChild({\r
- cls: "x-layout-mini x-layout-mini-"+this.position, html: " "\r
- });\r
- this.miniCollapsedEl.addClassOnOver('x-layout-mini-over');\r
- this.collapsedEl.addClassOnOver("x-layout-collapsed-over");\r
- this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true});\r
- }else {\r
- var t = this.toolTemplate.append(\r
- this.collapsedEl.dom,\r
- {id:'expand-'+this.position}, true);\r
- t.addClassOnOver('x-tool-expand-'+this.position+'-over');\r
- t.on('click', this.onExpandClick, this, {stopEvent:true});\r
- \r
- if(this.floatable !== false){\r
- this.collapsedEl.addClassOnOver("x-layout-collapsed-over");\r
- this.collapsedEl.on("click", this.collapseClick, this);\r
- }\r
- }\r
- }\r
- return this.collapsedEl;\r
- },\r
-\r
- // private\r
- onExpandClick : function(e){\r
- if(this.isSlid){\r
- this.afterSlideIn();\r
- this.panel.expand(false);\r
- }else{\r
- this.panel.expand();\r
- }\r
- },\r
-\r
- // private\r
- onCollapseClick : function(e){\r
- this.panel.collapse();\r
- },\r
-\r
- // private\r
- beforeCollapse : function(p, animate){\r
- this.lastAnim = animate;\r
- if(this.splitEl){\r
- this.splitEl.hide();\r
- }\r
- this.getCollapsedEl().show();\r
- this.panel.el.setStyle('z-index', 100);\r
- this.isCollapsed = true;\r
- this.layout.layout();\r
- },\r
-\r
- // private\r
- onCollapse : function(animate){\r
- this.panel.el.setStyle('z-index', 1);\r
- if(this.lastAnim === false || this.panel.animCollapse === false){\r
- this.getCollapsedEl().dom.style.visibility = 'visible';\r
- }else{\r
- this.getCollapsedEl().slideIn(this.panel.slideAnchor, {duration:.2});\r
- }\r
- this.state.collapsed = true;\r
- this.panel.saveState();\r
- },\r
-\r
- // private\r
- beforeExpand : function(animate){\r
- var c = this.getCollapsedEl();\r
- this.el.show();\r
- if(this.position == 'east' || this.position == 'west'){\r
- this.panel.setSize(undefined, c.getHeight());\r
- }else{\r
- this.panel.setSize(c.getWidth(), undefined);\r
- }\r
- c.hide();\r
- c.dom.style.visibility = 'hidden';\r
- this.panel.el.setStyle('z-index', 100);\r
- },\r
-\r
- // private\r
- onExpand : function(){\r
- this.isCollapsed = false;\r
- if(this.splitEl){\r
- this.splitEl.show();\r
- }\r
- this.layout.layout();\r
- this.panel.el.setStyle('z-index', 1);\r
- this.state.collapsed = false;\r
- this.panel.saveState();\r
- },\r
-\r
- // private\r
- collapseClick : function(e){\r
- if(this.isSlid){\r
- e.stopPropagation();\r
- this.slideIn();\r
- }else{\r
- e.stopPropagation();\r
- this.slideOut();\r
- }\r
- },\r
-\r
- // private\r
- onHide : function(){\r
- if(this.isCollapsed){\r
- this.getCollapsedEl().hide();\r
- }else if(this.splitEl){\r
- this.splitEl.hide();\r
- }\r
- },\r
-\r
- // private\r
- onShow : function(){\r
- if(this.isCollapsed){\r
- this.getCollapsedEl().show();\r
- }else if(this.splitEl){\r
- this.splitEl.show();\r
- }\r
- },\r
-\r
- /**\r
- * True if this region is currently visible, else false.\r
- * @return {Boolean}\r
- */\r
- isVisible : function(){\r
- return !this.panel.hidden;\r
- },\r
-\r
- /**\r
- * Returns the current margins for this region. If the region is collapsed, the cmargins (collapsed\r
- * margins) value will be returned, otherwise the margins value will be returned.\r
- * @return {Object} An object containing the element's margins: {left: (left margin), top: (top margin),\r
- * right: (right margin), bottom: (bottom margin)}\r
- */\r
- getMargins : function(){\r
- return this.isCollapsed && this.cmargins ? this.cmargins : this.margins;\r
- },\r
-\r
- /**\r
- * Returns the current size of this region. If the region is collapsed, the size of the collapsedEl will\r
- * be returned, otherwise the size of the region's panel will be returned.\r
- * @return {Object} An object containing the element's size: {width: (element width), height: (element height)} \r
- */\r
- getSize : function(){\r
- return this.isCollapsed ? this.getCollapsedEl().getSize() : this.panel.getSize();\r
- },\r
-\r
- /**\r
- * Sets the specified panel as the container element for this region.\r
- * @param {Ext.Panel} panel The new panel\r
- */\r
- setPanel : function(panel){\r
- this.panel = panel;\r
- },\r
-\r
- /**\r
- * Returns the minimum allowable width for this region.\r
- * @return {Number} The minimum width\r
- */\r
- getMinWidth: function(){\r
- return this.minWidth;\r
- },\r
-\r
- /**\r
- * Returns the minimum allowable height for this region.\r
- * @return {Number} The minimum height\r
- */\r
- getMinHeight: function(){\r
- return this.minHeight;\r
- },\r
-\r
- // private\r
- applyLayoutCollapsed : function(box){\r
- var ce = this.getCollapsedEl();\r
- ce.setLeftTop(box.x, box.y);\r
- ce.setSize(box.width, box.height);\r
- },\r
-\r
- // private\r
- applyLayout : function(box){\r
- if(this.isCollapsed){\r
- this.applyLayoutCollapsed(box);\r
- }else{\r
- this.panel.setPosition(box.x, box.y);\r
- this.panel.setSize(box.width, box.height);\r
- }\r
- },\r
-\r
- // private\r
- beforeSlide: function(){\r
- this.panel.beforeEffect();\r
- },\r
-\r
- // private\r
- afterSlide : function(){\r
- this.panel.afterEffect();\r
- },\r
-\r
- // private\r
- initAutoHide : function(){\r
- if(this.autoHide !== false){\r
- if(!this.autoHideHd){\r
- var st = new Ext.util.DelayedTask(this.slideIn, this);\r
- this.autoHideHd = {\r
- "mouseout": function(e){\r
- if(!e.within(this.el, true)){\r
- st.delay(500);\r
- }\r
- },\r
- "mouseover" : function(e){\r
- st.cancel();\r
- },\r
- scope : this\r
- };\r
- }\r
- this.el.on(this.autoHideHd);\r
- }\r
- },\r
-\r
- // private\r
- clearAutoHide : function(){\r
- if(this.autoHide !== false){\r
- this.el.un("mouseout", this.autoHideHd.mouseout);\r
- this.el.un("mouseover", this.autoHideHd.mouseover);\r
- }\r
- },\r
-\r
- // private\r
- clearMonitor : function(){\r
- Ext.getDoc().un("click", this.slideInIf, this);\r
- },\r
-\r
- // these names are backwards but not changed for compat\r
- // private\r
- slideOut : function(){\r
- if(this.isSlid || this.el.hasActiveFx()){\r
- return;\r
- }\r
- this.isSlid = true;\r
- var ts = this.panel.tools;\r
- if(ts && ts.toggle){\r
- ts.toggle.hide();\r
- }\r
- this.el.show();\r
- if(this.position == 'east' || this.position == 'west'){\r
- this.panel.setSize(undefined, this.collapsedEl.getHeight());\r
- }else{\r
- this.panel.setSize(this.collapsedEl.getWidth(), undefined);\r
- }\r
- this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top];\r
- this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());\r
- this.el.setStyle("z-index", 102);\r
- this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating');\r
- if(this.animFloat !== false){\r
- this.beforeSlide();\r
- this.el.slideIn(this.getSlideAnchor(), {\r
- callback: function(){\r
- this.afterSlide();\r
- this.initAutoHide();\r
- Ext.getDoc().on("click", this.slideInIf, this);\r
- },\r
- scope: this,\r
- block: true\r
- });\r
- }else{\r
- this.initAutoHide();\r
- Ext.getDoc().on("click", this.slideInIf, this);\r
- }\r
- },\r
-\r
- // private\r
- afterSlideIn : function(){\r
- this.clearAutoHide();\r
- this.isSlid = false;\r
- this.clearMonitor();\r
- this.el.setStyle("z-index", "");\r
- this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed');\r
- this.el.dom.style.left = this.restoreLT[0];\r
- this.el.dom.style.top = this.restoreLT[1];\r
-\r
- var ts = this.panel.tools;\r
- if(ts && ts.toggle){\r
- ts.toggle.show();\r
- }\r
- },\r
-\r
- // private\r
- slideIn : function(cb){\r
- if(!this.isSlid || this.el.hasActiveFx()){\r
- Ext.callback(cb);\r
- return;\r
- }\r
- this.isSlid = false;\r
- if(this.animFloat !== false){\r
- this.beforeSlide();\r
- this.el.slideOut(this.getSlideAnchor(), {\r
- callback: function(){\r
- this.el.hide();\r
- this.afterSlide();\r
- this.afterSlideIn();\r
- Ext.callback(cb);\r
- },\r
- scope: this,\r
- block: true\r
- });\r
- }else{\r
- this.el.hide();\r
- this.afterSlideIn();\r
- }\r
- },\r
-\r
- // private\r
- slideInIf : function(e){\r
- if(!e.within(this.el)){\r
- this.slideIn();\r
- }\r
- },\r
-\r
- // private\r
- anchors : {\r
- "west" : "left",\r
- "east" : "right",\r
- "north" : "top",\r
- "south" : "bottom"\r
- },\r
-\r
- // private\r
- sanchors : {\r
- "west" : "l",\r
- "east" : "r",\r
- "north" : "t",\r
- "south" : "b"\r
- },\r
-\r
- // private\r
- canchors : {\r
- "west" : "tl-tr",\r
- "east" : "tr-tl",\r
- "north" : "tl-bl",\r
- "south" : "bl-tl"\r
- },\r
-\r
- // private\r
- getAnchor : function(){\r
- return this.anchors[this.position];\r
- },\r
-\r
- // private\r
- getCollapseAnchor : function(){\r
- return this.canchors[this.position];\r
- },\r
-\r
- // private\r
- getSlideAnchor : function(){\r
- return this.sanchors[this.position];\r
- },\r
-\r
- // private\r
- getAlignAdj : function(){\r
- var cm = this.cmargins;\r
- switch(this.position){\r
- case "west":\r
- return [0, 0];\r
- break;\r
- case "east":\r
- return [0, 0];\r
- break;\r
- case "north":\r
- return [0, 0];\r
- break;\r
- case "south":\r
- return [0, 0];\r
- break;\r
- }\r
- },\r
-\r
- // private\r
- getExpandAdj : function(){\r
- var c = this.collapsedEl, cm = this.cmargins;\r
- switch(this.position){\r
- case "west":\r
- return [-(cm.right+c.getWidth()+cm.left), 0];\r
- break;\r
- case "east":\r
- return [cm.right+c.getWidth()+cm.left, 0];\r
- break;\r
- case "north":\r
- return [0, -(cm.top+cm.bottom+c.getHeight())];\r
- break;\r
- case "south":\r
- return [0, cm.top+cm.bottom+c.getHeight()];\r
- break;\r
- }\r
- }\r
-};\r
-\r
-/**\r
- * @class Ext.layout.BorderLayout.SplitRegion\r
- * @extends Ext.layout.BorderLayout.Region\r
- * This is a specialized type of BorderLayout region that has a built-in {@link Ext.SplitBar} for user resizing of regions.\r
- * @constructor\r
- * Create a new SplitRegion.\r
- * @param {Layout} layout Any valid Ext layout class\r
- * @param {Object} config The configuration options\r
- * @param {String} position The region position. Valid values are: north, south, east, west and center. Every\r
- * BorderLayout must have a center region for the primary content -- all other regions are optional.\r
- */\r
-Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){\r
- Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos);\r
- // prevent switch\r
- this.applyLayout = this.applyFns[pos];\r
-};\r
-\r
-Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, {\r
- /**\r
- * @cfg {String} splitTip\r
- * The tooltip to display when the user hovers over a non-collapsible region's split bar (defaults to "Drag\r
- * to resize."). Only applies if {@link #useSplitTips} = true.\r
- */\r
- splitTip : "Drag to resize.",\r
- /**\r
- * @cfg {String} collapsibleSplitTip\r
- * The tooltip to display when the user hovers over a collapsible region's split bar (defaults to "Drag\r
- * to resize. Double click to hide."). Only applies if {@link #useSplitTips} = true.\r
- */\r
- collapsibleSplitTip : "Drag to resize. Double click to hide.",\r
- /**\r
- * @cfg {Boolean} useSplitTips\r
- * True to display a tooltip when the user hovers over a region's split bar (defaults to false). The tooltip\r
- * text will be the value of either {@link #splitTip} or {@link #collapsibleSplitTip} as appropriate.\r
- */\r
- useSplitTips : false,\r
-\r
- // private\r
- splitSettings : {\r
- north : {\r
- orientation: Ext.SplitBar.VERTICAL,\r
- placement: Ext.SplitBar.TOP,\r
- maxFn : 'getVMaxSize',\r
- minProp: 'minHeight',\r
- maxProp: 'maxHeight'\r
- },\r
- south : {\r
- orientation: Ext.SplitBar.VERTICAL,\r
- placement: Ext.SplitBar.BOTTOM,\r
- maxFn : 'getVMaxSize',\r
- minProp: 'minHeight',\r
- maxProp: 'maxHeight'\r
- },\r
- east : {\r
- orientation: Ext.SplitBar.HORIZONTAL,\r
- placement: Ext.SplitBar.RIGHT,\r
- maxFn : 'getHMaxSize',\r
- minProp: 'minWidth',\r
- maxProp: 'maxWidth'\r
- },\r
- west : {\r
- orientation: Ext.SplitBar.HORIZONTAL,\r
- placement: Ext.SplitBar.LEFT,\r
- maxFn : 'getHMaxSize',\r
- minProp: 'minWidth',\r
- maxProp: 'maxWidth'\r
- }\r
- },\r
-\r
- // private\r
- applyFns : {\r
- west : function(box){\r
- if(this.isCollapsed){\r
- return this.applyLayoutCollapsed(box);\r
- }\r
- var sd = this.splitEl.dom, s = sd.style;\r
- this.panel.setPosition(box.x, box.y);\r
- var sw = sd.offsetWidth;\r
- s.left = (box.x+box.width-sw)+'px';\r
- s.top = (box.y)+'px';\r
- s.height = Math.max(0, box.height)+'px';\r
- this.panel.setSize(box.width-sw, box.height);\r
- },\r
- east : function(box){\r
- if(this.isCollapsed){\r
- return this.applyLayoutCollapsed(box);\r
- }\r
- var sd = this.splitEl.dom, s = sd.style;\r
- var sw = sd.offsetWidth;\r
- this.panel.setPosition(box.x+sw, box.y);\r
- s.left = (box.x)+'px';\r
- s.top = (box.y)+'px';\r
- s.height = Math.max(0, box.height)+'px';\r
- this.panel.setSize(box.width-sw, box.height);\r
- },\r
- north : function(box){\r
- if(this.isCollapsed){\r
- return this.applyLayoutCollapsed(box);\r
- }\r
- var sd = this.splitEl.dom, s = sd.style;\r
- var sh = sd.offsetHeight;\r
- this.panel.setPosition(box.x, box.y);\r
- s.left = (box.x)+'px';\r
- s.top = (box.y+box.height-sh)+'px';\r
- s.width = Math.max(0, box.width)+'px';\r
- this.panel.setSize(box.width, box.height-sh);\r
- },\r
- south : function(box){\r
- if(this.isCollapsed){\r
- return this.applyLayoutCollapsed(box);\r
- }\r
- var sd = this.splitEl.dom, s = sd.style;\r
- var sh = sd.offsetHeight;\r
- this.panel.setPosition(box.x, box.y+sh);\r
- s.left = (box.x)+'px';\r
- s.top = (box.y)+'px';\r
- s.width = Math.max(0, box.width)+'px';\r
- this.panel.setSize(box.width, box.height-sh);\r
- }\r
- },\r
-\r
- // private\r
- render : function(ct, p){\r
- Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p);\r
-\r
- var ps = this.position;\r
-\r
- this.splitEl = ct.createChild({\r
- cls: "x-layout-split x-layout-split-"+ps, html: " ",\r
- id: this.panel.id + '-xsplit'\r
- });\r
-\r
- if(this.collapseMode == 'mini'){\r
- this.miniSplitEl = this.splitEl.createChild({\r
- cls: "x-layout-mini x-layout-mini-"+ps, html: " "\r
- });\r
- this.miniSplitEl.addClassOnOver('x-layout-mini-over');\r
- this.miniSplitEl.on('click', this.onCollapseClick, this, {stopEvent:true});\r
- }\r
-\r
- var s = this.splitSettings[ps];\r
-\r
- this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation);\r
- this.split.placement = s.placement;\r
- this.split.getMaximumSize = this[s.maxFn].createDelegate(this);\r
- this.split.minSize = this.minSize || this[s.minProp];\r
- this.split.on("beforeapply", this.onSplitMove, this);\r
- this.split.useShim = this.useShim === true;\r
- this.maxSize = this.maxSize || this[s.maxProp];\r
-\r
- if(p.hidden){\r
- this.splitEl.hide();\r
- }\r
-\r
- if(this.useSplitTips){\r
- this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip;\r
- }\r
- if(this.collapsible){\r
- this.splitEl.on("dblclick", this.onCollapseClick, this);\r
- }\r
- },\r
-\r
- //docs inherit from superclass\r
- getSize : function(){\r
- if(this.isCollapsed){\r
- return this.collapsedEl.getSize();\r
- }\r
- var s = this.panel.getSize();\r
- if(this.position == 'north' || this.position == 'south'){\r
- s.height += this.splitEl.dom.offsetHeight;\r
- }else{\r
- s.width += this.splitEl.dom.offsetWidth;\r
- }\r
- return s;\r
- },\r
-\r
- // private\r
- getHMaxSize : function(){\r
- var cmax = this.maxSize || 10000;\r
- var center = this.layout.center;\r
- return Math.min(cmax, (this.el.getWidth()+center.el.getWidth())-center.getMinWidth());\r
- },\r
-\r
- // private\r
- getVMaxSize : function(){\r
- var cmax = this.maxSize || 10000;\r
- var center = this.layout.center;\r
- return Math.min(cmax, (this.el.getHeight()+center.el.getHeight())-center.getMinHeight());\r
- },\r
-\r
- // private\r
- onSplitMove : function(split, newSize){\r
- var s = this.panel.getSize();\r
- this.lastSplitSize = newSize;\r
- if(this.position == 'north' || this.position == 'south'){\r
- this.panel.setSize(s.width, newSize);\r
- this.state.height = newSize;\r
- }else{\r
- this.panel.setSize(newSize, s.height);\r
- this.state.width = newSize;\r
- }\r
- this.layout.layout();\r
- this.panel.saveState();\r
- return false;\r
- },\r
-\r
- /**\r
- * Returns a reference to the split bar in use by this region.\r
- * @return {Ext.SplitBar} The split bar\r
- */\r
- getSplitBar : function(){\r
- return this.split;\r
- },\r
- \r
- // inherit docs\r
- destroy : function() {\r
- Ext.destroy(\r
- this.miniSplitEl, \r
- this.split, \r
- this.splitEl\r
- );\r
- }\r
-});\r
-\r
-Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff