X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..refs/heads/master:/src/layout/container/Border.js?ds=inline diff --git a/src/layout/container/Border.js b/src/layout/container/Border.js index 248b2a55..96ce70a8 100644 --- a/src/layout/container/Border.js +++ b/src/layout/container/Border.js @@ -1,70 +1,88 @@ +/* + +This file is part of Ext JS 4 + +Copyright (c) 2011 Sencha Inc + +Contact: http://www.sencha.com/contact + +GNU General Public License Usage +This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. + +If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. + +*/ /** - * @class Ext.layout.container.Border - * @extends Ext.layout.container.Container - *
This is a multi-pane, application-oriented UI layout style that supports multiple - * nested panels, automatic bars between regions and built-in - * {@link Ext.panel.Panel#collapsible expanding and collapsing} of regions.
- *This class is intended to be extended or created via the layout:'border'
- * {@link Ext.container.Container#layout} config, and should generally not need to be created directly
- * via the new keyword.
Example usage:
- *
- Ext.create('Ext.panel.Panel', {
- width: 500,
- height: 400,
- title: 'Border Layout',
- layout: 'border',
- items: [{
- title: 'South Region is resizable',
- region: 'south', // position for region
- xtype: 'panel',
- height: 100,
- split: true, // enable resizing
- margins: '0 5 5 5'
- },{
- // xtype: 'panel' implied by default
- title: 'West Region is collapsible',
- region:'west',
- xtype: 'panel',
- margins: '5 0 0 5',
- width: 200,
- collapsible: true, // make collapsible
- id: 'west-region-container',
- layout: 'fit'
- },{
- title: 'Center Region',
- region: 'center', // center region is required, no width/height specified
- xtype: 'panel',
- layout: 'fit',
- margins: '5 5 0 0'
- }],
- renderTo: Ext.getBody()
- });
-
- * Notes:
region:'center'
.
- * The child item in the center region will always be resized to fill the remaining space not used by
- * the other regions in the layout.west
or east
may be configured with either
- * an initial width
, or a {@link Ext.layout.container.Box#flex} value, or an initial percentage width string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1
.north
or south
may be configured with either
- * an initial height
, or a {@link Ext.layout.container.Box#flex} value, or an initial percentage height string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1
.
-wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container');
-wrc.{@link Ext.container.Container#removeAll removeAll}();
-wrc.{@link Ext.container.Container#add add}({
- title: 'Added Panel',
- html: 'Some content'
-});
- *
- * Return the {@link Ext.panel.Panel#placeholder placeholder} Component to which the passed child Panel of the layout will collapse. - * By default, this will be a {@link Ext.panel.Header Header} component (Docked to the appropriate border). See {@link Ext.panel.Panel#placeholder placeholder}. - * config to customize this.
- *Note that this will be a fully instantiated Component, but will only be rendered when the Panel is first collapsed.
- * @param {Panel} panel The child Panel of the layout for which to return the {@link Ext.panel.Panel#placeholder placeholder}. - * @returns {Component} The Panel's {@link Ext.panel.Panel#placeholder placeholder} unless the {@link Ext.panel.Panel#collapseMode collapseMode} is - *'header'
, in which case undefined is returned.
+ * Return the {@link Ext.panel.Panel#placeholder placeholder} Component to which the passed child Panel of the
+ * layout will collapse. By default, this will be a {@link Ext.panel.Header Header} component (Docked to the
+ * appropriate border). See {@link Ext.panel.Panel#placeholder placeholder}. config to customize this.
+ *
+ * **Note that this will be a fully instantiated Component, but will only be _rendered_ when the Panel is first
+ * collapsed.**
+ * @param {Ext.panel.Panel} panel The child Panel of the layout for which to return the {@link
+ * Ext.panel.Panel#placeholder placeholder}.
+ * @return {Ext.Component} The Panel's {@link Ext.panel.Panel#placeholder placeholder} unless the {@link
+ * Ext.panel.Panel#collapseMode collapseMode} is `'header'`, in which case _undefined_ is returned.
*/
getPlaceholder: function(comp) {
var me = this,
@@ -542,7 +582,7 @@ Ext.define('Ext.layout.container.Border', {
baseCls: comp.baseCls + '-header',
ui: comp.ui,
indicateDrag: comp.draggable,
- cls: Ext.baseCSSPrefix + 'region-collapsed-placeholder ' + Ext.baseCSSPrefix + 'region-collapsed-' + comp.collapseDirection + '-placeholder',
+ cls: Ext.baseCSSPrefix + 'region-collapsed-placeholder ' + Ext.baseCSSPrefix + 'region-collapsed-' + comp.collapseDirection + '-placeholder ' + comp.collapsedCls,
listeners: comp.floatable ? {
click: {
fn: function(e) {
@@ -603,7 +643,7 @@ Ext.define('Ext.layout.container.Border', {
* @private
* Calculates the size and positioning of the passed child item. Must be present because Panel's expand,
* when configured with a flex, calls this method on its ownerCt's layout.
- * @param {Component} child The child Component to calculate the box for
+ * @param {Ext.Component} child The child Component to calculate the box for
* @return {Object} Object containing box measurements for the child. Properties are left,top,width,height.
*/
calculateChildBox: function(comp) {
@@ -626,6 +666,15 @@ Ext.define('Ext.layout.container.Border', {
* @returns {Boolean} false to inhibit the Panel from performing its own collapse.
*/
onBeforeRegionCollapse: function(comp, direction, animate) {
+ if (comp.collapsedChangingLayout) {
+ //