/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.1
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
@@ -366,7 +367,7 @@ var w = new Ext.Window({
* {@link Ext.layout.BorderLayout.Region#floatable floatable} config option.
*/
- /**
- * @cfg {Boolean} autoScroll
- * true to use overflow:'auto' on the panel's body element and show scroll bars automatically when
- * necessary, false to clip any overflowing content (defaults to false).
- */
+
/**
* @cfg {Mixed} floating
* This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this
@@ -491,33 +488,6 @@ var win = new Ext.Window({
* false to disable the iframe shim in browsers which need one (defaults to true).
* Note that this option only applies when {@link #floating} = true.
*/
-
Optional. Specify an existing HTML element, or the id of an existing HTML element to use as this Panel's
- * {@link #body} content.
afterRender method after any configured {@link #html HTML} has
- * been inserted, and so the document will not contain this element at the time the
- * {@link #render} event is fired.{@link Ext.Container#layout layout}
- * scheme that the Panel may use. It is just HTML. Layouts operate on child {@link Ext.Container#items items}.x-hidden or the x-hide-display CSS class to
- * prevent a brief flicker of the content before it is rendered to the panel.{@link #buttons}
- * config property. Read only.
- * @type Array
- * @property buttons
- */
- this.buttons = [];
- Ext.each(btns, function(btn){
- if(btn.render){ // button instance
- this.buttons.push(btn);
- }else if(btn.xtype){
- this.buttons.push(Ext.create(btn, 'button'));
- }else{
- this.addButton(btn);
- }
- }, this);
+ this.fbar = this.buttons;
+ this.buttons = null;
}
if(this.fbar){
- this.elements += ',footer';
+ this.createFbar(this.fbar);
}
if(this.autoLoad){
this.on('render', this.doAutoLoad, this, {delay:10});
}
},
+ // private
+ createFbar : function(fbar){
+ var min = this.minButtonWidth;
+ this.elements += ',footer';
+ this.fbar = this.createToolbar(fbar, {
+ buttonAlign: this.buttonAlign,
+ toolbarCls: 'x-panel-fbar',
+ enableOverflow: false,
+ defaults: function(c){
+ return {
+ minWidth: c.minWidth || min
+ };
+ }
+ });
+ // @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.
+ * @type Array
+ * @property buttons
+ */
+ this.fbar.items.each(function(c){
+ c.minWidth = c.minWidth || this.minButtonWidth;
+ }, this);
+ this.buttons = this.fbar.items.items;
+ },
+
+ // private
+ createToolbar: function(tb, options){
+ var result;
+ // Convert array to proper toolbar config
+ if(Ext.isArray(tb)){
+ tb = {
+ items: tb
+ };
+ }
+ result = tb.events ? Ext.apply(tb, options) : this.createComponent(Ext.apply({}, tb, options), 'toolbar');
+ this.toolbars.push(result);
+ return result;
+ },
+
// private
createElement : function(name, pnode){
if(this[name]){
@@ -895,23 +899,23 @@ new Ext.Panel({
d = el.dom,
bw,
ts;
-
-
+
+
if(this.collapsible && !this.hideCollapseTool){
this.tools = this.tools ? this.tools.slice(0) : [];
this.tools[this.collapseFirst?'unshift':'push']({
id: 'toggle',
handler : this.toggleCollapse,
scope: this
- });
+ });
}
-
+
if(this.tools){
ts = this.tools;
this.elements += (this.header !== false) ? ',header' : '';
}
this.tools = {};
-
+
el.addClass(this.baseCls);
if(d.firstChild){ // existing markup
this.header = el.down('.'+this.headerCls);
@@ -964,7 +968,7 @@ new Ext.Panel({
* b) The last element is reported incorrectly when using a loadmask
*/
this.ft = Ext.get(this.bwrap.dom.lastChild);
- this.mc = Ext.get(this.bwrap.dom.firstChild.firstChild.firstChild);
+ this.mc = Ext.get(mc);
}else{
this.createElement('header', d);
this.createElement('bwrap', d);
@@ -1037,49 +1041,20 @@ new Ext.Panel({
this.addTool.apply(this, ts);
}
- if(this.buttons && this.buttons.length > 0){
- this.fbar = new Ext.Toolbar({
- items: this.buttons,
- toolbarCls: 'x-panel-fbar'
- });
- }
- this.toolbars = [];
+ // Render Toolbars.
if(this.fbar){
- this.fbar = Ext.create(this.fbar, 'toolbar');
- this.fbar.enableOverflow = false;
- if(this.fbar.items){
- this.fbar.items.each(function(c){
- c.minWidth = c.minWidth || this.minButtonWidth;
- }, this);
- }
- this.fbar.toolbarCls = 'x-panel-fbar';
-
- var bct = this.footer.createChild({cls: 'x-panel-btns x-panel-btns-'+this.buttonAlign});
+ this.footer.addClass('x-panel-btns');
this.fbar.ownerCt = this;
- this.fbar.render(bct);
- bct.createChild({cls:'x-clear'});
- this.toolbars.push(this.fbar);
+ this.fbar.render(this.footer);
+ this.footer.createChild({cls:'x-clear'});
}
-
if(this.tbar && this.topToolbar){
- if(Ext.isArray(this.topToolbar)){
- this.topToolbar = new Ext.Toolbar(this.topToolbar);
- }else if(!this.topToolbar.events){
- this.topToolbar = Ext.create(this.topToolbar, 'toolbar');
- }
this.topToolbar.ownerCt = this;
this.topToolbar.render(this.tbar);
- this.toolbars.push(this.topToolbar);
}
if(this.bbar && this.bottomToolbar){
- if(Ext.isArray(this.bottomToolbar)){
- this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar);
- }else if(!this.bottomToolbar.events){
- this.bottomToolbar = Ext.create(this.bottomToolbar, 'toolbar');
- }
this.bottomToolbar.ownerCt = this;
this.bottomToolbar.render(this.bbar);
- this.toolbars.push(this.bottomToolbar);
}
},
@@ -1101,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
+ });
+ }
}
}
}
@@ -1113,14 +1091,12 @@ new Ext.Panel({
// private
makeFloating : function(cfg){
this.floating = true;
- this.el = new Ext.Layer(
- Ext.isObject(cfg) ? cfg : {
- shadow: Ext.isDefined(this.shadow) ? this.shadow : 'sides',
- shadowOffset: this.shadowOffset,
- constrain:false,
- shim: this.shim === false ? false : undefined
- }, this.el
- );
+ this.el = new Ext.Layer(Ext.apply({}, cfg, {
+ shadow: Ext.isDefined(this.shadow) ? this.shadow : 'sides',
+ shadowOffset: this.shadowOffset,
+ constrain:false,
+ shim: this.shim === false ? false : undefined
+ }), this.el);
},
/**
@@ -1139,33 +1115,37 @@ 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.
* @param {String/Object} config A valid {@link Ext.Button} config. A string will become the text for a default
* button config, an object will be treated as a button config object.
* @param {Function} handler The function to be called on button {@link Ext.Button#click}
- * @param {Object} scope The scope to use for the button handler function
+ * @param {Object} scope The scope (this reference) in which the button handler function is executed. Defaults to the Button.
* @return {Ext.Button} The button that was added
*/
addButton : function(config, handler, scope){
- var bc = {
- handler: handler,
- scope: scope,
- minWidth: this.minButtonWidth,
- hideParent:true
- };
- if(Ext.isString(config)){
- bc.text = config;
- }else{
- Ext.apply(bc, config);
+ if(!this.fbar){
+ this.createFbar([]);
}
- var btn = new Ext.Button(bc);
- if(!this.buttons){
- this.buttons = [];
+ if(handler){
+ if(Ext.isString(config)){
+ config = {text: config};
+ }
+ config = Ext.apply({
+ handler: handler,
+ scope: scope
+ }, config);
}
- this.buttons.push(btn);
- return btn;
+ return this.fbar.add(config);
},
// private
@@ -1175,7 +1155,7 @@ new Ext.Panel({
this.tools = [];
}
Ext.each(arguments, function(arg){
- this.tools.push(arg)
+ this.tools.push(arg);
}, this);
return;
}
@@ -1196,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));
@@ -1221,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);
@@ -1232,15 +1213,16 @@ new Ext.Panel({
syncHeight : function(){
var h = this.toolbarHeight,
bd = this.body,
- lsh = this.lastSize.height;
-
+ lsh = this.lastSize.height,
+ sz;
+
if(this.autoHeight || !Ext.isDefined(lsh) || lsh == 'auto'){
return;
}
-
-
+
+
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();
@@ -1285,36 +1267,14 @@ new Ext.Panel({
if(this.title){
this.setTitle(this.title);
}
- this.setAutoScroll();
- if(this.html){
- this.body.update(Ext.isObject(this.html) ?
- Ext.DomHelper.markup(this.html) :
- this.html);
- delete this.html;
- }
- if(this.contentEl){
- var ce = Ext.getDom(this.contentEl);
- Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);
- this.body.dom.appendChild(ce);
- }
- 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
- setAutoScroll : function(){
- if(this.rendered && this.autoScroll){
- var el = this.body || this.el;
- if(el){
- el.setOverflow('auto');
- }
- }
- },
-
// private
getKeyMap : function(){
if(!this.keyMap){
@@ -1340,10 +1300,9 @@ new Ext.Panel({
remove: this.syncHeight
});
}, this);
- if(!this.ownerCt){
- this.syncHeight();
- }
+ this.syncHeight();
}
+
},
// private
@@ -1372,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
@@ -1421,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);
}
},
@@ -1430,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);
},
@@ -1459,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);
}
},
@@ -1467,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);
@@ -1502,54 +1473,52 @@ 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.
+ // If we have auto-widthed it, get the resulting full offset width so we can size the Toolbars to match
+ // The Toolbars must not buffer this resize operation because we need to know their heights.
+
if(Ext.isNumber(w)){
- w = this.adjustBodyWidth(w - this.getFrameWidth());
- if(this.tbar){
- this.tbar.setWidth(w);
- if(this.topToolbar){
- this.topToolbar.setSize(w);
- }
+ this.body.setWidth(w = this.adjustBodyWidth(w - this.getFrameWidth()));
+ } else if (w == 'auto') {
+ w = this.body.setWidth('auto').dom.offsetWidth;
+ } else {
+ w = this.body.dom.offsetWidth;
+ }
+
+ if(this.tbar){
+ this.tbar.setWidth(w);
+ if(this.topToolbar){
+ this.topToolbar.setSize(w);
}
- if(this.bbar){
- this.bbar.setWidth(w);
- if(this.bottomToolbar){
- this.bottomToolbar.setSize(w);
+ }
+ if(this.bbar){
+ this.bbar.setWidth(w);
+ if(this.bottomToolbar){
+ this.bottomToolbar.setSize(w);
+ // The bbar does not move on resize without this.
+ if (Ext.isIE) {
+ this.bbar.setStyle('position', 'static');
+ this.bbar.setStyle('position', '');
}
}
+ }
+ if(this.footer){
+ this.footer.setWidth(w);
if(this.fbar){
- var f = this.fbar,
- fWidth = 1,
- strict = Ext.isStrict;
- if(this.buttonAlign == 'left'){
- fWidth = w - f.container.getFrameWidth('lr');
- }else{
- //center/right alignment off in webkit
- if(Ext.isIE || Ext.isWebKit){
- //center alignment ok on webkit.
- //right broken in both, center on IE
- if(!(this.buttonAlign == 'center' && Ext.isWebKit) && (!strict || (!Ext.isIE8 && strict))){
- (function(){
- f.setWidth(f.getEl().child('.x-toolbar-ct').getWidth());
- }).defer(1);
- }else{
- fWidth = 'auto';
- }
- }else{
- fWidth = 'auto';
- }
- }
- f.setWidth(fWidth);
+ this.fbar.setSize(Ext.isIE ? (w - this.footer.getFrameWidth('lr')) : 'auto');
}
- this.body.setWidth(w);
- }else if(w == 'auto'){
- this.body.setWidth(w);
}
+ // 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);
@@ -1559,26 +1528,28 @@ 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;
this.on('expand', function(){
delete this.queuedExpand;
this.onResize(this.queuedBodySize.width, this.queuedBodySize.height);
- this.doLayout();
}, this, {single:true});
}
}
this.onBodyResize(w, h);
}
this.syncShadow();
+ Ext.Panel.superclass.onResize.call(this, adjWidth, adjHeight, rawWidth, rawHeight);
+
},
-
+
// private
onBodyResize: function(w, h){
this.fireEvent('bodyresize', this, w, h);
},
-
+
// private
getToolbarHeight: function(){
var h = 0;
@@ -1590,7 +1561,7 @@ new Ext.Panel({
return h;
},
- // private
+ // deprecate
adjustBodyHeight : function(h){
return h;
},
@@ -1626,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;
+ */
},
/**
@@ -1655,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
@@ -1670,6 +1653,11 @@ new Ext.Panel({
return this.body;
},
+ // private
+ getContentTarget : function(){
+ return this.body;
+ },
+
/**
* Sets the title text for the panel and optionally the {@link #iconCls icon class}.
*In order to be able to set the title, a header element must have been created @@ -1727,38 +1715,46 @@ panel.load({ // private beforeDestroy : function(){ + Ext.Panel.superclass.beforeDestroy.call(this); if(this.header){ this.header.removeAllListeners(); - if(this.headerAsText){ - Ext.Element.uncache(this.header.child('span')); - } } - Ext.Element.uncache( - this.ft, - this.mc, - this.header, - this.tbar, - this.bbar, - this.footer, - this.body, - this.bwrap - ); if(this.tools){ for(var k in this.tools){ Ext.destroy(this.tools[k]); } } - if(this.buttons){ - for(var b in this.buttons){ - Ext.destroy(this.buttons[b]); + 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]); } } if(this.rendered){ - Ext.destroy(this.toolbars); - }else{ - Ext.destroy(this.topToolbar, this.bottomToolbar); + Ext.destroy( + this.ft, + this.header, + this.footer, + this.tbar, + this.bbar, + this.body, + this.mc, + this.bwrap, + this.dd + ); + if (this.fbar) { + Ext.destroy( + this.fbar, + this.fbar.el + ); + } } - Ext.Panel.superclass.beforeDestroy.call(this); + Ext.destroy(this.toolbars); }, // private @@ -1818,6 +1814,6 @@ panel.load({ */ }); Ext.reg('panel', Ext.Panel); - + \ No newline at end of file