/**
* @class Ext.panel.Panel
* @extends Ext.panel.AbstractPanel
* <p>Panel is a container that has specific functionality and structural components that make
@@ -101,14 +118,14 @@ Ext.define('Ext.panel.Panel', {
alias: 'widget.panel',
alternateClassName: 'Ext.Panel',
- /**
+ /**
* @cfg {String} collapsedCls
* A CSS class to add to the panel's element after it has been collapsed (defaults to
* <code>'collapsed'</code>).
*/
collapsedCls: 'collapsed',
- /**
+ /**
* @cfg {Boolean} animCollapse
* <code>true</code> to animate the transition when the panel is collapsed, <code>false</code> to skip the
* animation (defaults to <code>true</code> if the {@link Ext.fx.Anim} class is available, otherwise <code>false</code>).
@@ -116,7 +133,7 @@ Ext.define('Ext.panel.Panel', {
*/
animCollapse: Ext.enableFx,
- /**
+ /**
* @cfg {Number} minButtonWidth
* Minimum width of all footer toolbar buttons in pixels (defaults to <tt>75</tt>). If set, this will
* be used as the default value for the <tt>{@link Ext.button.Button#minWidth}</tt> config of
@@ -126,28 +143,28 @@ Ext.define('Ext.panel.Panel', {
*/
minButtonWidth: 75,
- /**
+ /**
* @cfg {Boolean} collapsed
* <code>true</code> to render the panel collapsed, <code>false</code> to render it expanded (defaults to
* <code>false</code>).
*/
collapsed: false,
- /**
+ /**
* @cfg {Boolean} collapseFirst
* <code>true</code> to make sure the collapse/expand toggle button always renders first (to the left of)
* any other tools in the panel's title bar, <code>false</code> to render it last (defaults to <code>true</code>).
*/
collapseFirst: true,
- /**
+ /**
* @cfg {Boolean} hideCollapseTool
* <code>true</code> to hide the expand/collapse toggle button when <code>{@link #collapsible} == true</code>,
* <code>false</code> to display it (defaults to <code>false</code>).
*/
hideCollapseTool: false,
- /**
+ /**
* @cfg {Boolean} titleCollapse
* <code>true</code> to allow expanding and collapsing the panel (when <code>{@link #collapsible} = true</code>)
* by clicking anywhere in the header bar, <code>false</code>) to allow it only by clicking to tool button
@@ -155,7 +172,7 @@ Ext.define('Ext.panel.Panel', {
*/
titleCollapse: false,
- /**
+ /**
* @cfg {String} collapseMode
* <p><b>Important: this config is only effective for {@link #collapsible} Panels which are direct child items of a {@link Ext.layout.container.Border border layout}.</b></p>
* <p>When <i>not</i> a direct child item of a {@link Ext.layout.container.Border border layout}, then the Panel's header remains visible, and the body is collapsed to zero dimensions.
@@ -168,7 +185,7 @@ Ext.define('Ext.panel.Panel', {
* </ul></div></p>
*/
- /**
+ /**
* @cfg {Mixed} placeholder
* <p><b>Important: This config is only effective for {@link #collapsible} Panels which are direct child items of a {@link Ext.layout.container.Border border layout}
* when not using the <code>'header'</code> {@link #collapseMode}.</b></p>
@@ -177,7 +194,7 @@ Ext.define('Ext.panel.Panel', {
* containing a {@link Ext.panel.Tool Tool} to re-expand the Panel.</p>
*/
- /**
+ /**
* @cfg {Boolean} floatable
* <p><b>Important: This config is only effective for {@link #collapsible} Panels which are direct child items of a {@link Ext.layout.container.Border border layout}.</b></p>
* <tt>true</tt> to allow clicking a collapsed Panel's {@link #placeholder} to display the Panel floated
@@ -185,8 +202,14 @@ Ext.define('Ext.panel.Panel', {
* clicking the expand button to see it again (defaults to <tt>true</tt>).
*/
floatable: true,
-
- /**
+
+ /**
+ * @cfg {Mixed} overlapHeader
+ * True to overlap the header in a panel over the framing of the panel itself. This is needed when frame:true (and is done automatically for you). Otherwise it is undefined.
+ * If you manually add rounded corners to a panel header which does not have frame:true, this will need to be set to true.
+ */
+
+ /**
* @cfg {Boolean} collapsible
* <p>True to make the panel collapsible and have an expand/collapse toggle Tool added into
* the header tool button area. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool (defaults to false).</p>
@@ -194,7 +217,7 @@ Ext.define('Ext.panel.Panel', {
*/
collapsible: false,
- /**
+ /**
* @cfg {Boolean} collapseDirection
* <p>The direction to collapse the Panel when the toggle button is clicked.</p>
* <p>Defaults to the {@link #headerPosition}</p>
@@ -202,7 +225,7 @@ Ext.define('Ext.panel.Panel', {
* <p>Specify as <code>'top'</code>, <code>'bottom'</code>, <code>'left'</code> or <code>'right'</code>.</p>
*/
- /**
+ /**
* @cfg {Boolean} closable
* <p>True to display the 'close' tool button and allow the user to close the window, false to
* hide the button and disallow closing the window (defaults to <code>false</code>).</p>
@@ -214,7 +237,7 @@ Ext.define('Ext.panel.Panel', {
*/
closable: false,
- /**
+ /**
* @cfg {String} closeAction
* <p>The action to take when the close header tool is clicked:
* <div class="mdetail-params"><ul>
@@ -233,7 +256,7 @@ Ext.define('Ext.panel.Panel', {
*/
closeAction: 'destroy',
- /**
+ /**
* @cfg {Object/Array} dockedItems
* A component or series of components to be added as docked items to this panel.
* The docked items can be docked to either the top, right, left or bottom of a panel.
@@ -250,29 +273,29 @@ var panel = new Ext.panel.Panel({
});</pre></code>
*/
- /**
+ /**
* @cfg {Boolean} preventHeader Prevent a Header from being created and shown. Defaults to false.
*/
preventHeader: false,
- /**
+ /**
* @cfg {String} headerPosition Specify as <code>'top'</code>, <code>'bottom'</code>, <code>'left'</code> or <code>'right'</code>. Defaults to <code>'top'</code>.
*/
headerPosition: 'top',
- /**
+ /**
* @cfg {Boolean} frame
* True to apply a frame to the panel.
*/
frame: false,
- /**
+ /**
* @cfg {Boolean} frameHeader
* True to apply a frame to the panel panels header (if 'frame' is true).
*/
frameHeader: true,
- /**
+ /**
* @cfg {Array} tools
* An array of {@link Ext.panel.Tool} configs/instances to be added to the header tool area. The tools are stored as child
* components of the header container. They can be accessed using {@link #down} and {#query}, as well as the other
@@ -306,7 +329,7 @@ tools:[{
cls;
me.addEvents(
- /**
+ /**
* @event titlechange
* Fires after the Panel title has been set or changed.
* @param {Ext.panel.Panel} p the Panel which has been resized.
@@ -314,7 +337,7 @@ tools:[{
* @param {String} oldTitle The previous panel title.
*/
'titlechange',
- /**
+ /**
* @event iconchange
* Fires after the Panel iconCls has been set or changed.
* @param {Ext.panel.Panel} p the Panel which has been resized.
@@ -386,7 +409,7 @@ tools:[{
return this.header;
},
- /**
+ /**
* Set a title for the panel's header. See {@link Ext.panel.Header#title}.
* @param {String} newTitle
*/
@@ -407,7 +430,7 @@ tools:[{
me.fireEvent('titlechange', me, newTitle, oldTitle);
},
- /**
+ /**
* Set the iconCls for the panel's header. See {@link Ext.panel.Header#iconCls}.
* @param {String} newIconCls
*/
@@ -448,7 +471,7 @@ tools:[{
// Backwards compatibility
- /**
+ /**
* @cfg {Object/Array} tbar
Convenience method. Short for 'Top Bar'.
@@ -474,7 +497,7 @@ is equivalent to
me.tbar = null;
}
- /**
+ /**
* @cfg {Object/Array} bbar
Convenience method. Short for 'Bottom Bar'.
@@ -500,7 +523,7 @@ is equivalent to
me.bbar = null;
}
- /**
+ /**
* @cfg {Object/Array} buttons
Convenience method used for adding buttons docked to the bottom right of the panel. This is a
@@ -532,7 +555,7 @@ each of the buttons in the buttons toolbar.
me.buttons = null;
}
- /**
+ /**
* @cfg {Object/Array} fbar
Convenience method used for adding items to the bottom right of the panel. Short for Footer Bar.
@@ -584,7 +607,7 @@ each of the buttons in the fbar.
me.fbar = null;
}
- /**
+ /**
* @cfg {Object/Array} lbar
*
* Convenience method. Short for 'Left Bar' (left-docked, vertical toolbar).
@@ -610,7 +633,7 @@ each of the buttons in the fbar.
me.lbar = null;
}
- /**
+ /**
* @cfg {Object/Array} rbar
*
* Convenience method. Short for 'Right Bar' (right-docked, vertical toolbar).
@@ -637,7 +660,7 @@ each of the buttons in the fbar.
}
},
- /**
+ /**
* @private
* Tools are a Panel-specific capabilty.
* Panel uses initTools. Subclasses may contribute tools by implementing addTools.
@@ -683,13 +706,13 @@ each of the buttons in the fbar.
}
},
- /**
+ /**
* @private
* Template method to be implemented in subclasses to add their tools after the collapsible tool.
*/
addTools: Ext.emptyFn,
- /**
+ /**
* <p>Closes the Panel. By default, this method, removes it from the DOM, {@link Ext.Component#destroy destroy}s
* the Panel object and all its descendant Components. The {@link #beforeclose beforeclose}
* event is fired before the close happens and will cancel the close action if it returns false.<p>
@@ -745,7 +768,7 @@ each of the buttons in the fbar.
me.callParent(arguments);
},
- /**
+ /**
* Create, hide, or show the header component as appropriate based on the current config.
* @private
* @param {Boolean} force True to force the the header to be created
@@ -833,7 +856,7 @@ each of the buttons in the fbar.
}
},
- /**
+ /**
* Collapses the panel body so that the body becomes hidden. Docked Components parallel to the
* border towards which the collapse takes place will remain visible. Fires the {@link #beforecollapse} event which will
* cancel the collapse action if it returns false.
@@ -1014,12 +1037,14 @@ each of the buttons in the fbar.
cls: me.baseCls + '-collapsed-placeholder ' + ' ' + Ext.baseCSSPrefix + 'docked ' + me.baseCls + '-' + me.ui + '-collapsed',
renderTo: me.el
};
- reExpander[(reExpander.orientation == 'horizontal') ? 'tools' : 'items'] = [{
- xtype: 'tool',
- type: 'expand-' + me.expandDirection,
- handler: me.toggleCollapse,
- scope: me
- }];
+ if (!me.hideCollapseTool) {
+ reExpander[(reExpander.orientation == 'horizontal') ? 'tools' : 'items'] = [{
+ xtype: 'tool',
+ type: 'expand-' + me.expandDirection,
+ handler: me.toggleCollapse,
+ scope: me
+ }];
+ }
// Capture the size of the re-expander.
// For vertical headers in IE6 and IE7, this will be sized by a CSS rule in _panel.scss
@@ -1059,6 +1084,10 @@ each of the buttons in the fbar.
if (animate) {
me.animate(anim);
} else {
+ // EXTJSIV-1937 (would like to use setCalculateSize)
+ // save width/height here, expand puts them back
+ me.uncollapsedSize = { width: me.width, height: me.height };
+
me.setSize(anim.to.width, anim.to.height);
if (Ext.isDefined(anim.to.left) || Ext.isDefined(anim.to.top)) {
me.setPosition(anim.to.left, anim.to.top);
@@ -1108,7 +1137,7 @@ each of the buttons in the fbar.
}
},
- /**
+ /**
* Expands the panel body so that it becomes visible. Fires the {@link #beforeexpand} event which will
* cancel the expand action if it returns false.
* @param {Boolean} animate True to animate the transition, else false (defaults to the value of the
@@ -1119,6 +1148,19 @@ each of the buttons in the fbar.
if (!this.collapsed || this.fireEvent('beforeexpand', this, animate) === false) {
return false;
}
+
+ // EXTJSIV-1937 (would like to use setCalculateSize)
+ if (this.uncollapsedSize) {
+ Ext.Object.each(this.uncollapsedSize, function (name, value) {
+ if (Ext.isDefined(value)) {
+ this[name] = value;
+ } else {
+ delete this[name];
+ }
+ }, this);
+ delete this.uncollapsedSize;
+ }
+
var me = this,
i = 0,
l = me.hiddenDocked.length,
@@ -1285,7 +1327,7 @@ each of the buttons in the fbar.
}
},
- /**
+ /**
* Shortcut for performing an {@link #expand} or {@link #collapse} based on the current state of the panel.
* @return {Ext.panel.Panel} this
*/
@@ -1308,7 +1350,7 @@ each of the buttons in the fbar.
// private
initDraggable : function(){
- /**
+ /**
* <p>If this Panel is configured {@link #draggable}, this property will contain
* an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.</p>
* The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource}
@@ -1410,4 +1452,6 @@ each of the buttons in the fbar.
this.callParent([resizable]);
}
});
-