/** + + + ++ \ No newline at end of fileThe source code + + + + +/*! + * Ext JS Library 3.2.1 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** * @class Ext.Panel * @extends Ext.Container *- +Panel is a container that has specific functionality and structural components that make @@ -694,8 +700,8 @@ new Ext.Panel({ * @event bodyresize * Fires after the Panel has been resized. * @param {Ext.Panel} p the Panel which has been resized. - * @param {Number} width The Panel's new width. - * @param {Number} height The Panel's new height. + * @param {Number} width The Panel body's new width. + * @param {Number} height The Panel body's new height. */ 'bodyresize',
/** @@ -785,30 +791,30 @@ new Ext.Panel({ if(this.tbar){ this.elements += ',tbar'; this.topToolbar = this.createToolbar(this.tbar); - delete this.tbar; + this.tbar = null; } if(this.bbar){ this.elements += ',bbar'; this.bottomToolbar = this.createToolbar(this.bbar); - delete this.bbar; + this.bbar = null; } if(this.header === true){ this.elements += ',header'; - delete this.header; + this.header = null; }else if(this.headerCfg || (this.title && this.header !== false)){ this.elements += ',header'; } if(this.footerCfg || this.footer === true){ this.elements += ',footer'; - delete this.footer; + this.footer = null; } if(this.buttons){ this.fbar = this.buttons; - delete this.buttons; + this.buttons = null; } if(this.fbar){ this.createFbar(this.fbar); @@ -832,8 +838,8 @@ new Ext.Panel({ }; } }); - //@compat addButton and buttons could possibly be removed - //@target 4.0 + // @compat addButton and buttons could possibly be removed + // @target 4.0 /** * This Panel's Array of buttons as created from the{@link #buttons}* config property. Read only. @@ -856,8 +862,6 @@ new Ext.Panel({ }; } result = tb.events ? Ext.apply(tb, options) : this.createComponent(Ext.apply({}, tb, options), 'toolbar'); - result.ownerCt = this; - result.bufferResize = false; this.toolbars.push(result); return result; }, @@ -1036,18 +1040,21 @@ new Ext.Panel({ if(ts){ this.addTool.apply(this, ts); } + + // Render Toolbars. if(this.fbar){ this.footer.addClass('x-panel-btns'); + this.fbar.ownerCt = this; this.fbar.render(this.footer); this.footer.createChild({cls:'x-clear'}); } - if(this.tbar && this.topToolbar){ + this.topToolbar.ownerCt = this; this.topToolbar.render(this.tbar); } if(this.bbar && this.bottomToolbar){ + this.bottomToolbar.ownerCt = this; this.bottomToolbar.render(this.bbar); - } }, @@ -1069,9 +1076,12 @@ new Ext.Panel({ if(img){ Ext.fly(img).replaceClass(old, this.iconCls); }else{ - Ext.DomHelper.insertBefore(hd.dom.firstChild, { - tag:'img', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls - }); + var hdspan = hd.child('span.' + this.headerTextCls); + if (hdspan) { + Ext.DomHelper.insertBefore(hdspan.dom, { + tag:'img', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls + }); + } } } } @@ -1105,6 +1115,14 @@ new Ext.Panel({ return this.bottomToolbar; }, + /** + * Returns the {@link Ext.Toolbar toolbar} from the footer ({@link #fbar}) section of the panel. + * @return {Ext.Toolbar} The toolbar + */ + getFooterToolbar : function() { + return this.fbar; + }, + /** * Adds a button to this panel. Note that this method must be called prior to rendering. The preferred * approach is to add buttons via the {@link #buttons} config. @@ -1125,7 +1143,7 @@ new Ext.Panel({ config = Ext.apply({ handler: handler, scope: scope - }, config) + }, config); } return this.fbar.add(config); }, @@ -1137,7 +1155,7 @@ new Ext.Panel({ this.tools = []; } Ext.each(arguments, function(arg){ - this.tools.push(arg) + this.tools.push(arg); }, this); return; } @@ -1158,7 +1176,7 @@ new Ext.Panel({ var tc = a[i]; if(!this.tools[tc.id]){ var overCls = 'x-tool-'+tc.id+'-over'; - var t = this.toolTemplate.insertFirst((tc.align !== 'left') ? this[this.toolTarget] : this[this.toolTarget].child('span'), tc, true); + var t = this.toolTemplate.insertFirst(this[this.toolTarget], tc, true); this.tools[tc.id] = t; t.enableDisplayMode('block'); this.mon(t, 'click', this.createToolHandler(t, tc, overCls, this)); @@ -1183,6 +1201,7 @@ new Ext.Panel({ }, onLayout : function(shallow, force){ + Ext.Panel.superclass.onLayout.apply(this, arguments); if(this.hasLayout && this.toolbars.length > 0){ Ext.each(this.toolbars, function(tb){ tb.doLayout(undefined, force); @@ -1203,7 +1222,7 @@ new Ext.Panel({ if(h != this.getToolbarHeight()){ - h = Math.max(0, this.adjustBodyHeight(lsh - this.getFrameHeight())); + h = Math.max(0, lsh - this.getFrameHeight()); bd.setHeight(h); sz = bd.getSize(); this.toolbarHeight = this.getToolbarHeight(); @@ -1240,7 +1259,7 @@ new Ext.Panel({ }; }, - // private + // private afterRender : function(){ if(this.floating && !this.hidden){ this.el.show(); @@ -1248,13 +1267,13 @@ new Ext.Panel({ if(this.title){ this.setTitle(this.title); } - if(this.collapsed){ + Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last + if (this.collapsed) { this.collapsed = false; this.collapse(false); } - Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last this.initEvents(); - }, + }, // private getKeyMap : function(){ @@ -1281,9 +1300,7 @@ new Ext.Panel({ remove: this.syncHeight }); }, this); - if(!this.ownerCt){ - this.syncHeight(); - } + this.syncHeight(); } }, @@ -1314,9 +1331,7 @@ new Ext.Panel({ // private afterEffect : function(anim){ this.syncShadow(); - if(anim !== false){ - this.el.removeClass('x-panel-animated'); - } + this.el.removeClass('x-panel-animated'); }, // private - wraps up an animation param with internal callbacks @@ -1363,7 +1378,7 @@ new Ext.Panel({ Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this), this.collapseDefaults)); }else{ - this[this.collapseEl].hide(); + this[this.collapseEl].hide(this.hideMode); this.afterCollapse(false); } }, @@ -1372,7 +1387,17 @@ new Ext.Panel({ afterCollapse : function(anim){ this.collapsed = true; this.el.addClass(this.collapsedCls); + if(anim !== false){ + this[this.collapseEl].hide(this.hideMode); + } this.afterEffect(anim); + + // Reset lastSize of all sub-components so they KNOW they are in a collapsed container + this.cascade(function(c) { + if (c.lastSize) { + c.lastSize = { width: undefined, height: undefined }; + } + }); this.fireEvent('collapse', this); }, @@ -1401,7 +1426,7 @@ new Ext.Panel({ Ext.apply(this.createEffect(animArg||true, this.afterExpand, this), this.expandDefaults)); }else{ - this[this.collapseEl].show(); + this[this.collapseEl].show(this.hideMode); this.afterExpand(false); } }, @@ -1409,8 +1434,12 @@ new Ext.Panel({ // private afterExpand : function(anim){ this.collapsed = false; + if(anim !== false){ + this[this.collapseEl].show(this.hideMode); + } this.afterEffect(anim); - if(Ext.isDefined(this.deferLayout)){ + if (this.deferLayout) { + delete this.deferLayout; this.doLayout(true); } this.fireEvent('expand', this); @@ -1444,7 +1473,10 @@ new Ext.Panel({ }, // private - onResize : function(w, h){ + onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){ + var w = adjWidth, + h = adjHeight; + if(Ext.isDefined(w) || Ext.isDefined(h)){ if(!this.collapsed){ // First, set the the Panel's body width. @@ -1485,7 +1517,8 @@ new Ext.Panel({ // At this point, the Toolbars must be layed out for getFrameHeight to find a result. if(Ext.isNumber(h)){ - h = Math.max(0, this.adjustBodyHeight(h - this.getFrameHeight())); + h = Math.max(0, h - this.getFrameHeight()); + //h = Math.max(0, h - (this.getHeight() - this.body.getHeight())); this.body.setHeight(h); }else if(h == 'auto'){ this.body.setHeight(h); @@ -1495,6 +1528,7 @@ new Ext.Panel({ this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight()); } }else{ + // Adds an event to set the correct height afterExpand. This accounts for the deferHeight flag in panel this.queuedBodySize = {width: w, height: h}; if(!this.queuedExpand && this.allowQueuedExpand !== false){ this.queuedExpand = true; @@ -1507,7 +1541,8 @@ new Ext.Panel({ this.onBodyResize(w, h); } this.syncShadow(); - Ext.Panel.superclass.onResize.call(this); + Ext.Panel.superclass.onResize.call(this, adjWidth, adjHeight, rawWidth, rawHeight); + }, // private @@ -1526,7 +1561,7 @@ new Ext.Panel({ return h; }, - // private + // deprecate adjustBodyHeight : function(h){ return h; }, @@ -1562,18 +1597,27 @@ new Ext.Panel({ * header and footer elements, but not including the body height). To retrieve the body height see {@link #getInnerHeight}. * @return {Number} The frame height */ - getFrameHeight : function(){ - var h = this.el.getFrameWidth('tb') + this.bwrap.getFrameWidth('tb'); - h += (this.tbar ? this.tbar.getHeight() : 0) + - (this.bbar ? this.bbar.getHeight() : 0); + getFrameHeight : function() { + var h = Math.max(0, this.getHeight() - this.body.getHeight()); - if(this.frame){ - h += this.el.dom.firstChild.offsetHeight + this.ft.dom.offsetHeight + this.mc.getFrameWidth('tb'); - }else{ - h += (this.header ? this.header.getHeight() : 0) + - (this.footer ? this.footer.getHeight() : 0); + if (isNaN(h)) { + h = 0; } return h; + + /* Deprecate + var h = this.el.getFrameWidth('tb') + this.bwrap.getFrameWidth('tb'); + h += (this.tbar ? this.tbar.getHeight() : 0) + + (this.bbar ? this.bbar.getHeight() : 0); + + if(this.frame){ + h += this.el.dom.firstChild.offsetHeight + this.ft.dom.offsetHeight + this.mc.getFrameWidth('tb'); + }else{ + h += (this.header ? this.header.getHeight() : 0) + + (this.footer ? this.footer.getHeight() : 0); + } + return h; + */ }, /** @@ -1591,7 +1635,10 @@ new Ext.Panel({ * @return {Number} The body height */ getInnerHeight : function(){ - return this.getSize().height - this.getFrameHeight(); + return this.body.getHeight(); + /* Deprecate + return this.getSize().height - this.getFrameHeight(); + */ }, // private @@ -1677,6 +1724,12 @@ panel.load({ Ext.destroy(this.tools[k]); } } + if(this.toolbars.length > 0){ + Ext.each(this.toolbars, function(tb){ + tb.un('afterlayout', this.syncHeight, this); + tb.un('remove', this.syncHeight, this); + }, this); + } if(Ext.isArray(this.buttons)){ while(this.buttons.length) { Ext.destroy(this.buttons[0]); @@ -1687,12 +1740,12 @@ panel.load({ this.ft, this.header, this.footer, - this.toolbars, this.tbar, this.bbar, this.body, this.mc, - this.bwrap + this.bwrap, + this.dd ); if (this.fbar) { Ext.destroy( @@ -1700,12 +1753,8 @@ panel.load({ this.fbar.el ); } - }else{ - Ext.destroy( - this.topToolbar, - this.bottomToolbar - ); } + Ext.destroy(this.toolbars); }, // private @@ -1765,6 +1814,6 @@ panel.load({ */ }); Ext.reg('panel', Ext.Panel); -