- var me = this,
- cls;
-
- me.addEvents(
-<span id='Ext-panel-Panel-event-beforeexpand'> /**
-</span> * @event beforeexpand
- * Fires before this panel is expanded. Return false to prevent the expand.
- * @param {Ext.panel.Panel} p The Panel being expanded.
- * @param {Boolean} animate True if the expand is animated, else false.
- */
- "beforeexpand",
-
-<span id='Ext-panel-Panel-event-beforecollapse'> /**
-</span> * @event beforecollapse
- * Fires before this panel is collapsed. Return false to prevent the collapse.
- * @param {Ext.panel.Panel} p The Panel being collapsed.
- * @param {String} direction. The direction of the collapse. One of<ul>
- * <li>Ext.Component.DIRECTION_TOP</li>
- * <li>Ext.Component.DIRECTION_RIGHT</li>
- * <li>Ext.Component.DIRECTION_BOTTOM</li>
- * <li>Ext.Component.DIRECTION_LEFT</li></ul>
- * @param {Boolean} animate True if the collapse is animated, else false.
- */
- "beforecollapse",
-
-<span id='Ext-panel-Panel-event-expand'> /**
-</span> * @event expand
- * Fires after this Panel has expanded.
- * @param {Ext.panel.Panel} p The Panel that has been expanded.
- */
- "expand",
-
-<span id='Ext-panel-Panel-event-collapse'> /**
-</span> * @event collapse
- * Fires after this Panel hass collapsed.
- * @param {Ext.panel.Panel} p The Panel that has been collapsed.
- */
- "collapse",
-
-<span id='Ext-panel-Panel-event-titlechange'> /**
-</span> * @event titlechange
- * Fires after the Panel title has been set or changed.
- * @param {Ext.panel.Panel} p the Panel which has been resized.
- * @param {String} newTitle The new title.
- * @param {String} oldTitle The previous panel title.
- */
- 'titlechange',
-
-<span id='Ext-panel-Panel-event-iconchange'> /**
-</span> * @event iconchange
- * Fires after the Panel iconCls has been set or changed.
- * @param {Ext.panel.Panel} p the Panel which has been resized.
- * @param {String} newIconCls The new iconCls.
- * @param {String} oldIconCls The previous panel iconCls.
- */
- 'iconchange'
- );
-
- // Save state on these two events.
- this.addStateEvents('expand', 'collapse');
-
- if (me.unstyled) {
- me.setUI('plain');
- }
-
- if (me.frame) {
- me.setUI(me.ui + '-framed');
- }
-
- me.callParent();
-
- me.collapseDirection = me.collapseDirection || me.headerPosition || Ext.Component.DIRECTION_TOP;
-
- // Backwards compatibility
- me.bridgeToolbars();
- },
-
- setBorder: function(border) {
- // var me = this,
- // method = (border === false || border === 0) ? 'addClsWithUI' : 'removeClsWithUI';
- //
- // me.callParent(arguments);
- //
- // if (me.collapsed) {
- // me[method](me.collapsedCls + '-noborder');
- // }
- //
- // if (me.header) {
- // me.header.setBorder(border);
- // if (me.collapsed) {
- // me.header[method](me.collapsedCls + '-noborder');
- // }
- // }
-
- this.callParent(arguments);
- },
-
- beforeDestroy: function() {
- Ext.destroy(
- this.ghostPanel,
- this.dd
- );
- this.callParent();
- },
-
- initAria: function() {
- this.callParent();
- this.initHeaderAria();
- },
-
- initHeaderAria: function() {
- var me = this,
- el = me.el,
- header = me.header;
- if (el && header) {
- el.dom.setAttribute('aria-labelledby', header.titleCmp.id);
- }
- },
-
- getHeader: function() {
- return this.header;
- },
-
-<span id='Ext-panel-Panel-method-setTitle'> /**
-</span> * Set a title for the panel&#39;s header. See {@link Ext.panel.Header#title}.
- * @param {String} newTitle
- */
- setTitle: function(newTitle) {
- var me = this,
- oldTitle = this.title;
-
- me.title = newTitle;
- if (me.header) {
- me.header.setTitle(newTitle);
- } else {
- me.updateHeader();
- }
-
- if (me.reExpander) {
- me.reExpander.setTitle(newTitle);
- }
- me.fireEvent('titlechange', me, newTitle, oldTitle);
- },
-
-<span id='Ext-panel-Panel-method-setIconCls'> /**
-</span> * Set the iconCls for the panel&#39;s header. See {@link Ext.panel.Header#iconCls}.
- * @param {String} newIconCls
- */
- setIconCls: function(newIconCls) {
- var me = this,
- oldIconCls = me.iconCls;
-
- me.iconCls = newIconCls;
- var header = me.header;
- if (header) {
- header.setIconCls(newIconCls);
- }
- me.fireEvent('iconchange', me, newIconCls, oldIconCls);
- },
-
- bridgeToolbars: function() {
- var me = this,
- fbar,
- fbarDefaults,
- minButtonWidth = me.minButtonWidth;
-
- function initToolbar (toolbar, pos, useButtonAlign) {
- if (Ext.isArray(toolbar)) {
- toolbar = {
- xtype: 'toolbar',
- items: toolbar
- };
- }
- else if (!toolbar.xtype) {
- toolbar.xtype = 'toolbar';
- }
- toolbar.dock = pos;
- if (pos == 'left' || pos == 'right') {
- toolbar.vertical = true;
- }
-
- // Legacy support for buttonAlign (only used by buttons/fbar)
- if (useButtonAlign) {
- toolbar.layout = Ext.applyIf(toolbar.layout || {}, {
- // default to 'end' (right-aligned) if me.buttonAlign is undefined or invalid
- pack: { left:'start', center:'center' }[me.buttonAlign] || 'end'
- });
- }
- return toolbar;
- }
-
- // Short-hand toolbars (tbar, bbar and fbar plus new lbar and rbar):
-
-<span id='Ext-panel-Panel-cfg-buttonAlign'> /**
-</span> * @cfg {String} buttonAlign
- * <p>The alignment of any buttons added to this panel. Valid values are 'right',
- * 'left' and 'center' (defaults to 'right' for buttons/fbar, 'left' for other toolbar types).</p>
- * <p><b>NOTE:</b> The newer way to specify toolbars is to use the dockedItems config, and
- * instead of buttonAlign you would add the layout: { pack: 'start' | 'center' | 'end' }
- * option to the dockedItem config.</p>
- */
-
-<span id='Ext-panel-Panel-cfg-tbar'> /**
-</span> * @cfg {Object/Array} tbar
-
-Convenience method. Short for 'Top Bar'.
-
- tbar: [
- { xtype: 'button', text: 'Button 1' }
- ]
-
-is equivalent to
-
- dockedItems: [{
- xtype: 'toolbar',
- dock: 'top',
- items: [
- { xtype: 'button', text: 'Button 1' }
- ]
- }]
-
- * @markdown
- */
- if (me.tbar) {
- me.addDocked(initToolbar(me.tbar, 'top'));
- me.tbar = null;
- }
-
-<span id='Ext-panel-Panel-cfg-bbar'> /**
-</span> * @cfg {Object/Array} bbar
-
-Convenience method. Short for 'Bottom Bar'.
-
- bbar: [
- { xtype: 'button', text: 'Button 1' }
- ]
-
-is equivalent to
-
- dockedItems: [{
- xtype: 'toolbar',
- dock: 'bottom',
- items: [
- { xtype: 'button', text: 'Button 1' }
- ]
- }]
-
- * @markdown
- */
- if (me.bbar) {
- me.addDocked(initToolbar(me.bbar, 'bottom'));
- me.bbar = null;
- }
-
-<span id='Ext-panel-Panel-cfg-buttons'> /**
-</span> * @cfg {Object/Array} buttons
-
-Convenience method used for adding buttons docked to the bottom of the panel. This is a
-synonym for the {@link #fbar} config.
-
- buttons: [
- { text: 'Button 1' }
- ]
-
-is equivalent to
-
- dockedItems: [{
- xtype: 'toolbar',
- dock: 'bottom',
- ui: 'footer',
- defaults: {minWidth: {@link #minButtonWidth}},
- items: [
- { xtype: 'component', flex: 1 },
- { xtype: 'button', text: 'Button 1' }
- ]
- }]
-
-The {@link #minButtonWidth} is used as the default {@link Ext.button.Button#minWidth minWidth} for
-each of the buttons in the buttons toolbar.
-
- * @markdown
- */
- if (me.buttons) {
- me.fbar = me.buttons;
- me.buttons = null;
- }
-
-<span id='Ext-panel-Panel-cfg-fbar'> /**
-</span> * @cfg {Object/Array} fbar
-
-Convenience method used for adding items to the bottom of the panel. Short for Footer Bar.
-
- fbar: [
- { type: 'button', text: 'Button 1' }
- ]
-
-is equivalent to
-
- dockedItems: [{
- xtype: 'toolbar',
- dock: 'bottom',
- ui: 'footer',
- defaults: {minWidth: {@link #minButtonWidth}},
- items: [
- { xtype: 'component', flex: 1 },
- { xtype: 'button', text: 'Button 1' }
- ]
- }]
-
-The {@link #minButtonWidth} is used as the default {@link Ext.button.Button#minWidth minWidth} for
-each of the buttons in the fbar.
-
- * @markdown
- */
- if (me.fbar) {
- fbar = initToolbar(me.fbar, 'bottom', true); // only we useButtonAlign
- fbar.ui = 'footer';
-
- // Apply the minButtonWidth config to buttons in the toolbar
- if (minButtonWidth) {
- fbarDefaults = fbar.defaults;
- fbar.defaults = function(config) {
- var defaults = fbarDefaults || {};
- if ((!config.xtype || config.xtype === 'button' || (config.isComponent && config.isXType('button'))) &&
- !('minWidth' in defaults)) {
- defaults = Ext.apply({minWidth: minButtonWidth}, defaults);
- }
- return defaults;
- };
- }
-
- me.addDocked(fbar);
- me.fbar = null;
- }
-
-<span id='Ext-panel-Panel-cfg-lbar'> /**
-</span> * @cfg {Object/Array} lbar
- *
- * Convenience method. Short for 'Left Bar' (left-docked, vertical toolbar).
- *
- * lbar: [
- * { xtype: 'button', text: 'Button 1' }
- * ]
- *
- * is equivalent to
- *
- * dockedItems: [{
- * xtype: 'toolbar',
- * dock: 'left',
- * items: [
- * { xtype: 'button', text: 'Button 1' }
- * ]
- * }]
- *
- * @markdown
- */
- if (me.lbar) {
- me.addDocked(initToolbar(me.lbar, 'left'));
- me.lbar = null;
- }
-
-<span id='Ext-panel-Panel-cfg-rbar'> /**
-</span> * @cfg {Object/Array} rbar
- *
- * Convenience method. Short for 'Right Bar' (right-docked, vertical toolbar).
- *
- * rbar: [
- * { xtype: 'button', text: 'Button 1' }
- * ]
- *
- * is equivalent to
- *
- * dockedItems: [{
- * xtype: 'toolbar',
- * dock: 'right',
- * items: [
- * { xtype: 'button', text: 'Button 1' }
- * ]
- * }]
- *
- * @markdown
- */
- if (me.rbar) {
- me.addDocked(initToolbar(me.rbar, 'right'));
- me.rbar = null;
- }
- },
-
-<span id='Ext-panel-Panel-method-initTools'> /**
-</span> * @private
- * Tools are a Panel-specific capabilty.
- * Panel uses initTools. Subclasses may contribute tools by implementing addTools.
- */
- initTools: function() {
- var me = this;
-
- me.tools = me.tools || [];
-
- // Add a collapse tool unless configured to not show a collapse tool
- // or to not even show a header.
- if (me.collapsible && !(me.hideCollapseTool || me.header === false)) {
- me.collapseDirection = me.collapseDirection || me.headerPosition || 'top';
- me.collapseTool = me.expandTool = me.createComponent({
- xtype: 'tool',
- type: 'collapse-' + me.collapseDirection,
- expandType: me.getOppositeDirection(me.collapseDirection),
- handler: me.toggleCollapse,
- scope: me
- });
-
- // Prepend collapse tool is configured to do so.
- if (me.collapseFirst) {
- me.tools.unshift(me.collapseTool);
- }
- }
-
- // Add subclass-specific tools.
- me.addTools();
-
- // Make Panel closable.
- if (me.closable) {
- me.addClsWithUI('closable');
- me.addTool({
- type: 'close',
- handler: Ext.Function.bind(me.close, this, [])
- });
- }
-
- // Append collapse tool if needed.
- if (me.collapseTool && !me.collapseFirst) {
- me.tools.push(me.collapseTool);
- }
- },
-
-<span id='Ext-panel-Panel-property-addTools'> /**
-</span> * @private
- * Template method to be implemented in subclasses to add their tools after the collapsible tool.
- */
- addTools: Ext.emptyFn,
-
-<span id='Ext-panel-Panel-method-close'> /**
-</span> * <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>
- * <p><b>Note:</b> This method is not affected by the {@link #closeAction} setting which
- * only affects the action triggered when clicking the {@link #closable 'close' tool in the header}.
- * To hide the Panel without destroying it, call {@link #hide}.</p>
- */
- close: function() {
- if (this.fireEvent('beforeclose', this) !== false) {
- this.doClose();
- }
- },
-
- // private
- doClose: function() {
- this.fireEvent('close', this);
- this[this.closeAction]();
- },
-
- onRender: function(ct, position) {
- var me = this,
- topContainer;
-
- // Add class-specific header tools.
- // Panel adds collapsible and closable.
- me.initTools();
-
- // Dock the header/title
- me.updateHeader();
-
- // Call to super after adding the header, to prevent an unnecessary re-layout
- me.callParent(arguments);
- },
-
- afterRender: function() {
- var me = this;
- me.callParent(arguments);
- if (me.collapsed) {
- me.collapsed = false;
- me.collapse(null, false, true);
- }
- },
-
-<span id='Ext-panel-Panel-method-updateHeader'> /**
-</span> * Create, hide, or show the header component as appropriate based on the current config.
- * @private
- * @param {Boolean} force True to force the header to be created
- */
- updateHeader: function(force) {
- var me = this,
- header = me.header,
- title = me.title,
- tools = me.tools;
-
- if (!me.preventHeader && (force || title || (tools && tools.length))) {
- if (!header) {
- header = me.header = Ext.create('Ext.panel.Header', {
- title : title,
- orientation : (me.headerPosition == 'left' || me.headerPosition == 'right') ? 'vertical' : 'horizontal',
- dock : me.headerPosition || 'top',
- textCls : me.headerTextCls,
- iconCls : me.iconCls,
- baseCls : me.baseCls + '-header',
- tools : tools,
- ui : me.ui,
- indicateDrag: me.draggable,
- border : me.border,
- frame : me.frame && me.frameHeader,
- ignoreParentFrame : me.frame || me.overlapHeader,
- ignoreBorderManagement: me.frame || me.ignoreHeaderBorderManagement,
- listeners : me.collapsible && me.titleCollapse ? {
- click: me.toggleCollapse,
- scope: me
- } : null
- });
- me.addDocked(header, 0);
-
- // Reference the Header's tool array.
- // Header injects named references.
- me.tools = header.tools;
- }
- header.show();
- me.initHeaderAria();
- } else if (header) {
- header.hide();
- }
- },
-
- // inherit docs
- setUI: function(ui) {
- var me = this;
-
- me.callParent(arguments);
-
- if (me.header) {
- me.header.setUI(ui);
- }
- },
-
- // private
- getContentTarget: function() {
- return this.body;
- },
-
- getTargetEl: function() {
- return this.body || this.frameBody || this.el;
- },
-
- addTool: function(tool) {
- this.tools.push(tool);
- var header = this.header;
- if (header) {
- header.addTool(tool);
- }
- this.updateHeader();
- },
-
- getOppositeDirection: function(d) {
- var c = Ext.Component;
- switch (d) {
- case c.DIRECTION_TOP:
- return c.DIRECTION_BOTTOM;
- case c.DIRECTION_RIGHT:
- return c.DIRECTION_LEFT;
- case c.DIRECTION_BOTTOM:
- return c.DIRECTION_TOP;
- case c.DIRECTION_LEFT:
- return c.DIRECTION_RIGHT;
- }
- },
-
-<span id='Ext-panel-Panel-method-collapse'> /**
-</span> * 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.
- * @param {String} direction. The direction to collapse towards. Must be one of<ul>
- * <li>Ext.Component.DIRECTION_TOP</li>
- * <li>Ext.Component.DIRECTION_RIGHT</li>
- * <li>Ext.Component.DIRECTION_BOTTOM</li>
- * <li>Ext.Component.DIRECTION_LEFT</li></ul>
- * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the
- * {@link #animCollapse} panel config)
- * @return {Ext.panel.Panel} this
- */
- collapse: function(direction, animate, /* private - passed if called at render time */ internal) {
- var me = this,
- c = Ext.Component,
- height = me.getHeight(),
- width = me.getWidth(),
- frameInfo,
- newSize = 0,
- dockedItems = me.dockedItems.items,
- dockedItemCount = dockedItems.length,
- i = 0,
- comp,
- pos,
- anim = {
- from: {
- height: height,
- width: width
- },
- to: {
- height: height,
- width: width
- },
- listeners: {
- afteranimate: me.afterCollapse,
- scope: me
- },
- duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration)
- },
- reExpander,
- reExpanderOrientation,
- reExpanderDock,
- getDimension,
- setDimension,
- collapseDimension;
-
- if (!direction) {
- direction = me.collapseDirection;
- }
-
- // If internal (Called because of initial collapsed state), then no animation, and no events.
- if (internal) {
- animate = false;
- } else if (me.collapsed || me.fireEvent('beforecollapse', me, direction, animate) === false) {
- return false;
- }
-
- reExpanderDock = direction;
- me.expandDirection = me.getOppositeDirection(direction);
-
- // Track docked items which we hide during collapsed state
- me.hiddenDocked = [];
-
- switch (direction) {
- case c.DIRECTION_TOP:
- case c.DIRECTION_BOTTOM:
- me.expandedSize = me.getHeight();
- reExpanderOrientation = 'horizontal';
- collapseDimension = 'height';
- getDimension = 'getHeight';
- setDimension = 'setHeight';
-
- // Collect the height of the visible header.
- // Hide all docked items except the header.
- // Hide *ALL* docked items if we're going to end up hiding the whole Panel anyway
- for (; i < dockedItemCount; i++) {
- comp = dockedItems[i];
- if (comp.isVisible()) {
- if (comp.isHeader && (!comp.dock || comp.dock == 'top' || comp.dock == 'bottom')) {
- reExpander = comp;
- } else {
- me.hiddenDocked.push(comp);
- }
- }
- }
-
- if (direction == Ext.Component.DIRECTION_BOTTOM) {
- pos = me.getPosition()[1] - Ext.fly(me.el.dom.offsetParent).getRegion().top;
- anim.from.top = pos;
- }
- break;
-
- case c.DIRECTION_LEFT:
- case c.DIRECTION_RIGHT:
- me.expandedSize = me.getWidth();
- reExpanderOrientation = 'vertical';
- collapseDimension = 'width';
- getDimension = 'getWidth';
- setDimension = 'setWidth';
-
- // Collect the height of the visible header.
- // Hide all docked items except the header.
- // Hide *ALL* docked items if we're going to end up hiding the whole Panel anyway
- for (; i < dockedItemCount; i++) {
- comp = dockedItems[i];
- if (comp.isVisible()) {
- if (comp.isHeader && (comp.dock == 'left' || comp.dock == 'right')) {
- reExpander = comp;
- } else {
- me.hiddenDocked.push(comp);
- }
- }
- }
-
- if (direction == Ext.Component.DIRECTION_RIGHT) {
- pos = me.getPosition()[0] - Ext.fly(me.el.dom.offsetParent).getRegion().left;
- anim.from.left = pos;
- }
- break;
-
- default:
- throw('Panel collapse must be passed a valid Component collapse direction');
- }
-
- // No scrollbars when we shrink this Panel
- // And no laying out of any children... we're effectively *hiding* the body
- me.setAutoScroll(false);
- me.suspendLayout = true;
- me.body.setVisibilityMode(Ext.core.Element.DISPLAY);
-
- // Disable toggle tool during animated collapse
- if (animate && me.collapseTool) {
- me.collapseTool.disable();
- }
-
- // Add the collapsed class now, so that collapsed CSS rules are applied before measurements are taken.
- me.addClsWithUI(me.collapsedCls);
- // if (me.border === false) {
- // me.addClsWithUI(me.collapsedCls + '-noborder');
- // }
-
- // We found a header: Measure it to find the collapse-to size.
- if (reExpander) {
- //we must add the collapsed cls to the header and then remove to get the proper height
- reExpander.addClsWithUI(me.collapsedCls);
- reExpander.addClsWithUI(me.collapsedCls + '-' + reExpander.dock);
- if (me.border && (!me.frame || (me.frame && Ext.supports.CSS3BorderRadius))) {
- reExpander.addClsWithUI(me.collapsedCls + '-border-' + reExpander.dock);
- }
-
- frameInfo = reExpander.getFrameInfo();
-
- //get the size
- newSize = reExpander[getDimension]() + (frameInfo ? frameInfo[direction] : 0);
-
- //and remove
- reExpander.removeClsWithUI(me.collapsedCls);
- reExpander.removeClsWithUI(me.collapsedCls + '-' + reExpander.dock);
- if (me.border && (!me.frame || (me.frame && Ext.supports.CSS3BorderRadius))) {
- reExpander.removeClsWithUI(me.collapsedCls + '-border-' + reExpander.dock);
- }
- }
- // No header: Render and insert a temporary one, and then measure it.
- else {
- reExpander = {
- hideMode: 'offsets',
- temporary: true,
- title: me.title,
- orientation: reExpanderOrientation,
- dock: reExpanderDock,
- textCls: me.headerTextCls,
- iconCls: me.iconCls,
- baseCls: me.baseCls + '-header',
- ui: me.ui,
- frame: me.frame && me.frameHeader,
- ignoreParentFrame: me.frame || me.overlapHeader,
- indicateDrag: me.draggable,
- cls: me.baseCls + '-collapsed-placeholder ' + ' ' + Ext.baseCSSPrefix + 'docked ' + me.baseCls + '-' + me.ui + '-collapsed',
- renderTo: me.el
- };
- 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
- reExpander = me.reExpander = Ext.create('Ext.panel.Header', reExpander);
- newSize = reExpander[getDimension]() + ((reExpander.frame) ? reExpander.frameSize[direction] : 0);
- reExpander.hide();
-
- // Insert the new docked item
- me.insertDocked(0, reExpander);
- }
-
- me.reExpander = reExpander;
- me.reExpander.addClsWithUI(me.collapsedCls);
- me.reExpander.addClsWithUI(me.collapsedCls + '-' + reExpander.dock);
- if (me.border && (!me.frame || (me.frame && Ext.supports.CSS3BorderRadius))) {
- me.reExpander.addClsWithUI(me.collapsedCls + '-border-' + me.reExpander.dock);
- }
-
- // If collapsing right or down, we'll be also animating the left or top.
- if (direction == Ext.Component.DIRECTION_RIGHT) {
- anim.to.left = pos + (width - newSize);
- } else if (direction == Ext.Component.DIRECTION_BOTTOM) {
- anim.to.top = pos + (height - newSize);
- }
-
- // Animate to the new size
- anim.to[collapseDimension] = newSize;
-
- // When we collapse a panel, the panel is in control of one dimension (depending on
- // collapse direction) and sets that on the component. We must restore the user's
- // original value (including non-existance) when we expand. Using this technique, we
- // mimic setCalculatedSize for the dimension we do not control and setSize for the
- // one we do (only while collapsed).
- if (!me.collapseMemento) {
- me.collapseMemento = new Ext.util.Memento(me);
- }
- me.collapseMemento.capture(['width', 'height', 'minWidth', 'minHeight']);
-
- // Remove any flex config before we attempt to collapse.
- me.savedFlex = me.flex;
- me.minWidth = 0;
- me.minHeight = 0;
- delete me.flex;
-
- if (animate) {
- me.animate(anim);
- } else {
- 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);
- }
- me.afterCollapse(false, internal);
- }
- return me;
- },
-
- afterCollapse: function(animated, internal) {
- var me = this,
- i = 0,
- l = me.hiddenDocked.length;
-
- me.collapseMemento.restore(['minWidth', 'minHeight']);
-
- me.body.hide();
- for (; i < l; i++) {
- me.hiddenDocked[i].hide();
- }
- if (me.reExpander) {
- me.reExpander.updateFrame();
- me.reExpander.show();
- }
- me.collapsed = true;
-
- if (!internal) {
- me.doComponentLayout();
- }
-
- if (me.resizer) {
- me.resizer.disable();
- }
-
- // Now we can restore the dimension we don't control to its original state
- if (Ext.Component.VERTICAL_DIRECTION.test(me.expandDirection)) {
- me.collapseMemento.restore('width');
- } else {
- me.collapseMemento.restore('height');
- }
-
- // If me Panel was configured with a collapse tool in its header, flip it's type
- if (me.collapseTool) {
- me.collapseTool.setType('expand-' + me.expandDirection);
- }
- if (!internal) {
- me.fireEvent('collapse', me);
- }
-
- // Re-enable the toggle tool after an animated collapse
- if (animated && me.collapseTool) {
- me.collapseTool.enable();
- }
- },
-
-<span id='Ext-panel-Panel-method-expand'> /**
-</span> * 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
- * {@link #animCollapse} panel config)
- * @return {Ext.panel.Panel} this
- */
- expand: function(animate) {
- var me = this;
- if (!me.collapsed || me.fireEvent('beforeexpand', me, animate) === false) {
- return false;
- }
-
- var i = 0,
- l = me.hiddenDocked.length,
- direction = me.expandDirection,
- height = me.getHeight(),
- width = me.getWidth(),
- pos, anim;
-
- // Disable toggle tool during animated expand
- if (animate && me.collapseTool) {
- me.collapseTool.disable();
- }
-
- // Show any docked items that we hid on collapse
- // And hide the injected reExpander Header
- for (; i < l; i++) {
- me.hiddenDocked[i].hidden = false;
- me.hiddenDocked[i].el.show();
- }
- if (me.reExpander) {
- if (me.reExpander.temporary) {
- me.reExpander.hide();
- } else {
- me.reExpander.removeClsWithUI(me.collapsedCls);
- me.reExpander.removeClsWithUI(me.collapsedCls + '-' + me.reExpander.dock);
- if (me.border && (!me.frame || (me.frame && Ext.supports.CSS3BorderRadius))) {
- me.reExpander.removeClsWithUI(me.collapsedCls + '-border-' + me.reExpander.dock);
- }
- me.reExpander.updateFrame();
- }
- }
-
- // If me Panel was configured with a collapse tool in its header, flip it's type
- if (me.collapseTool) {
- me.collapseTool.setType('collapse-' + me.collapseDirection);
- }
-
- // Unset the flag before the potential call to calculateChildBox to calculate our newly flexed size
- me.collapsed = false;
-
- // Collapsed means body element was hidden
- me.body.show();
-
- // Remove any collapsed styling before any animation begins
- me.removeClsWithUI(me.collapsedCls);
- // if (me.border === false) {
- // me.removeClsWithUI(me.collapsedCls + '-noborder');
- // }
-
- anim = {
- to: {
- },
- from: {
- height: height,
- width: width
- },
- listeners: {
- afteranimate: me.afterExpand,
- scope: me
- }
- };
-
- if ((direction == Ext.Component.DIRECTION_TOP) || (direction == Ext.Component.DIRECTION_BOTTOM)) {
-
- // If autoHeight, measure the height now we have shown the body element.
- if (me.autoHeight) {
- me.setCalculatedSize(me.width, null);
- anim.to.height = me.getHeight();
-
- // Must size back down to collapsed for the animation.
- me.setCalculatedSize(me.width, anim.from.height);
- }
- // If we were flexed, then we can't just restore to the saved size.
- // We must restore to the currently correct, flexed size, so we much ask the Box layout what that is.
- else if (me.savedFlex) {
- me.flex = me.savedFlex;
- anim.to.height = me.ownerCt.layout.calculateChildBox(me).height;
- delete me.flex;
- }
- // Else, restore to saved height
- else {
- anim.to.height = me.expandedSize;
- }
-
- // top needs animating upwards
- if (direction == Ext.Component.DIRECTION_TOP) {
- pos = me.getPosition()[1] - Ext.fly(me.el.dom.offsetParent).getRegion().top;
- anim.from.top = pos;
- anim.to.top = pos - (anim.to.height - height);
- }
- } else if ((direction == Ext.Component.DIRECTION_LEFT) || (direction == Ext.Component.DIRECTION_RIGHT)) {
-
- // If autoWidth, measure the width now we have shown the body element.
- if (me.autoWidth) {
- me.setCalculatedSize(null, me.height);
- anim.to.width = me.getWidth();
-
- // Must size back down to collapsed for the animation.
- me.setCalculatedSize(anim.from.width, me.height);
- }
- // If we were flexed, then we can't just restore to the saved size.
- // We must restore to the currently correct, flexed size, so we much ask the Box layout what that is.
- else if (me.savedFlex) {
- me.flex = me.savedFlex;
- anim.to.width = me.ownerCt.layout.calculateChildBox(me).width;
- delete me.flex;
- }
- // Else, restore to saved width
- else {
- anim.to.width = me.expandedSize;
- }
-
- // left needs animating leftwards
- if (direction == Ext.Component.DIRECTION_LEFT) {
- pos = me.getPosition()[0] - Ext.fly(me.el.dom.offsetParent).getRegion().left;
- anim.from.left = pos;
- anim.to.left = pos - (anim.to.width - width);
- }
- }
-
- if (animate) {
- me.animate(anim);
- } else {
- me.setCalculatedSize(anim.to.width, anim.to.height);
- if (anim.to.x) {
- me.setLeft(anim.to.x);
- }
- if (anim.to.y) {
- me.setTop(anim.to.y);
- }
- me.afterExpand(false);
- }
-
- return me;
- },
-
- afterExpand: function(animated) {