A specialized panel intended for use as an application window. Windows are floated, {@link #resizable}, and * {@link #draggable} by default. Windows can be {@link #maximizable maximized} to fill the viewport, * restored to their prior size, and can be {@link #minimize}d.
- *Windows can also be linked to a {@link Ext.WindowGroup} or managed by the {@link Ext.WindowMgr} to provide + *
Windows can also be linked to a {@link Ext.WindowGroup} or managed by the {@link Ext.WindowMgr} to provide * grouping, activation, to front, to back and other application-specific behavior.
*By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element * specify {@link Ext.Component#renderTo renderTo}.
@@ -62,15 +62,15 @@ Ext.Window = Ext.extend(Ext.Panel, { */ /** * @cfg {Boolean} collapsed - * True to render the window collapsed, false to render it expanded (defaults to false). Note that if - * {@link #expandOnShow} is true (the default) it will override the collapsed config and the window + * True to render the window collapsed, false to render it expanded (defaults to false). Note that if + * {@link #expandOnShow} is true (the default) it will override the collapsed config and the window * will always be expanded when shown. */ /** * @cfg {Boolean} maximized * True to initially display the window in a maximized state. (Defaults to false). */ - + /** * @cfg {String} baseCls * The base CSS class to apply to this panel's element (defaults to 'x-window'). @@ -122,15 +122,15 @@ Ext.Window = Ext.extend(Ext.Panel, { /** * @cfg {Boolean} constrain * True to constrain the window within its containing element, false to allow it to fall outside of its - * containing element. By default the window will be rendered to document.body. To render and constrain the + * containing element. By default the window will be rendered to document.body. To render and constrain the * window within another element specify {@link #renderTo}. * (defaults to false). Optionally the header only can be constrained using {@link #constrainHeader}. */ constrain : false, /** * @cfg {Boolean} constrainHeader - * True to constrain the window header within its containing element (allowing the window body to fall outside - * of its containing element) or false to allow the header to fall outside its containing element (defaults to + * True to constrain the window header within its containing element (allowing the window body to fall outside + * of its containing element) or false to allow the header to fall outside its containing element (defaults to * false). Optionally the entire window can be constrained using {@link #constrain}. */ constrainHeader : false, @@ -180,8 +180,17 @@ Ext.Window = Ext.extend(Ext.Panel, { /** * @cfg {Boolean} initHidden * True to hide the window until show() is explicitly called (defaults to true). + * @deprecated + */ + initHidden : undefined, + + /** + * @cfg {Boolean} hidden + * Render this component hidden (default is true). If true, the + * {@link #hide} method will be called internally. */ - initHidden : true, + hidden : true, + /** * @cfg {Boolean} monitorResize @hide * This is automatically managed based on the value of constrain and constrainToHeader @@ -201,16 +210,17 @@ Ext.Window = Ext.extend(Ext.Panel, { // private initComponent : function(){ + this.initTools(); Ext.Window.superclass.initComponent.call(this); this.addEvents( /** * @event activate - * Fires after the window has been visually activated via {@link setActive}. + * Fires after the window has been visually activated via {@link #setActive}. * @param {Ext.Window} this */ /** * @event deactivate - * Fires after the window has been visually deactivated via {@link setActive}. + * Fires after the window has been visually deactivated via {@link #setActive}. * @param {Ext.Window} this */ /** @@ -240,10 +250,13 @@ Ext.Window = Ext.extend(Ext.Panel, { */ 'restore' ); - if(this.initHidden === false){ - this.show(); - }else{ + // for backwards compat, this should be removed at some point + if(Ext.isDefined(this.initHidden)){ + this.hidden = this.initHidden; + } + if(this.hidden === false){ this.hidden = true; + this.show(); } }, @@ -275,7 +288,9 @@ Ext.Window = Ext.extend(Ext.Panel, { this.mask.hide(); this.mon(this.mask, 'click', this.focus, this); } - this.initTools(); + if(this.maximizable){ + this.mon(this.header, 'dblclick', this.toggleMaximize, this); + } }, // private @@ -374,7 +389,6 @@ Ext.Window = Ext.extend(Ext.Panel, { handler: this.restore.createDelegate(this, []), hidden:true }); - this.mon(this.header, 'dblclick', this.toggleMaximize, this); } if(this.closable){ this.addTool({ @@ -419,7 +433,6 @@ Ext.Window = Ext.extend(Ext.Panel, { this.updateHandles(); this.saveState(); this.doLayout(); - this.fireEvent('resize', this, box.width, box.height); }, /** @@ -428,10 +441,10 @@ Ext.Window = Ext.extend(Ext.Panel, { */ focus : function(){ var f = this.focusEl, db = this.defaultButton, t = typeof db; - if(t != 'undefined'){ - if(t == 'number' && this.fbar){ + if(Ext.isDefined(db)){ + if(Ext.isNumber(db) && this.fbar){ f = this.fbar.items.get(db); - }else if(t == 'string'){ + }else if(Ext.isString(db)){ f = Ext.getCmp(db); }else{ f = db; @@ -496,7 +509,7 @@ Ext.Window = Ext.extend(Ext.Panel, { this.on('show', cb, scope, {single:true}); } this.hidden = false; - if(animateTarget !== undefined){ + if(Ext.isDefined(animateTarget)){ this.setAnimateTarget(animateTarget); } this.beforeShow(); @@ -542,15 +555,15 @@ Ext.Window = Ext.extend(Ext.Panel, { this.proxy.show(); this.proxy.setBox(this.animateTarget.getBox()); this.proxy.setOpacity(0); - var b = this.getBox(false); - b.callback = this.afterShow.createDelegate(this, [true], false); - b.scope = this; - b.duration = 0.25; - b.easing = 'easeNone'; - b.opacity = 0.5; - b.block = true; + var b = this.getBox(); this.el.setStyle('display', 'none'); - this.proxy.shift(b); + this.proxy.shift(Ext.apply(b, { + callback: this.afterShow.createDelegate(this, [true], false), + scope: this, + easing: 'easeNone', + duration: 0.25, + opacity: 0.5 + })); }, /** @@ -604,14 +617,13 @@ Ext.Window = Ext.extend(Ext.Panel, { var tb = this.getBox(false); this.proxy.setBox(tb); this.el.hide(); - var b = this.animateTarget.getBox(); - b.callback = this.afterHide; - b.scope = this; - b.duration = 0.25; - b.easing = 'easeNone'; - b.block = true; - b.opacity = 0; - this.proxy.shift(b); + this.proxy.shift(Ext.apply(this.animateTarget.getBox(), { + callback: this.afterHide, + scope: this, + duration: 0.25, + easing: 'easeNone', + opacity: 0 + })); }, // private @@ -704,12 +716,19 @@ Ext.Window = Ext.extend(Ext.Panel, { */ close : function(){ if(this.fireEvent('beforeclose', this) !== false){ - this.hide(null, function(){ - this.fireEvent('close', this); - this.destroy(); - }, this); + if(this.hidden){ + this.doClose(); + }else{ + this.hide(null, this.doClose, this); + } } }, + + // private + doClose : function(){ + this.fireEvent('close', this); + this.destroy(); + }, /** * Fits the window within its current container and automatically replaces @@ -840,7 +859,7 @@ Ext.Window = Ext.extend(Ext.Panel, { this.alignTo(el, alignment, offsets); }; Ext.EventManager.onWindowResize(this.doAnchor, this); - + var tm = typeof monitorScroll; if(tm != 'undefined'){ Ext.EventManager.on(window, 'scroll', this.doAnchor, this, @@ -866,7 +885,8 @@ Ext.Window = Ext.extend(Ext.Panel, { /** * Makes this the active window by showing its shadow, or deactivates it by hiding its shadow. This method also - * fires the {@link #activate} or {@link #deactivate} event depending on which action occurred. + * fires the {@link #activate} or {@link #deactivate} event depending on which action occurred. This method is + * called internally by {@link Ext.WindowMgr}. * @param {Boolean} active True to activate the window, false to deactivate it (defaults to false) */ setActive : function(active){ @@ -1119,625 +1139,631 @@ Ext.WindowGroup = function(){ * with separate z-order stacks, create additional instances of {@link Ext.WindowGroup} as needed. * @singleton */ -Ext.WindowMgr = new Ext.WindowGroup();/** - * @class Ext.MessageBox - *Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.
- *Note that the MessageBox is asynchronous. Unlike a regular JavaScript alert (which will halt
- * browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code
- * that should only run after some user feedback from the MessageBox, you must use a callback function
- * (see the function parameter for {@link #show} for more details).
Example usage:
- *
-// Basic alert:
-Ext.Msg.alert('Status', 'Changes saved successfully.');
-
-// Prompt for user data and process the result using a callback:
-Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
- if (btn == 'ok'){
- // process text value and close...
- }
-});
-
-// Show a dialog using config options:
-Ext.Msg.show({
- title:'Save Changes?',
- msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
- buttons: Ext.Msg.YESNOCANCEL,
- fn: processResult,
- animEl: 'elId',
- icon: Ext.MessageBox.QUESTION
-});
-Progress and wait dialogs will ignore this option since they do not respond to user - * actions and can only be closed programmatically, so any required function should be called - * by the same code after it closes the dialog. Parameters passed:
-Ext.Msg.show({
- title: 'Address',
- msg: 'Please enter your address:',
- width: 300,
- buttons: Ext.MessageBox.OKCANCEL,
- multiline: true,
- fn: saveAddress,
- animEl: 'addAddressBtn',
- icon: Ext.MessageBox.INFO
-});
--Ext.MessageBox.INFO -Ext.MessageBox.WARNING -Ext.MessageBox.QUESTION -Ext.MessageBox.ERROR - *- * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon - * @return {Ext.MessageBox} this - */ - setIcon : function(icon){ - if(icon && icon != ''){ - iconEl.removeClass('x-hidden'); - iconEl.replaceClass(iconCls, icon); - bodyEl.addClass('x-dlg-icon'); - iconCls = icon; - }else{ - iconEl.replaceClass(iconCls, 'x-hidden'); - bodyEl.removeClass('x-dlg-icon'); - iconCls = ''; - } - return this; - }, - - /** - * Displays a message box with a progress bar. This message box has no buttons and is not closeable by - * the user. You are responsible for updating the progress bar as needed via {@link Ext.MessageBox#updateProgress} - * and closing the message box when the process is complete. - * @param {String} title The title bar text - * @param {String} msg The message box body text - * @param {String} progressText (optional) The text to display inside the progress bar (defaults to '') - * @return {Ext.MessageBox} this - */ - progress : function(title, msg, progressText){ - this.show({ - title : title, - msg : msg, - buttons: false, - progress:true, - closable:false, - minWidth: this.minProgressWidth, - progressText: progressText - }); - return this; - }, - - /** - * Displays a message box with an infinitely auto-updating progress bar. This can be used to block user - * interaction while waiting for a long-running process to complete that does not have defined intervals. - * You are responsible for closing the message box when the process is complete. - * @param {String} msg The message box body text - * @param {String} title (optional) The title bar text - * @param {Object} config (optional) A {@link Ext.ProgressBar#waitConfig} object - * @return {Ext.MessageBox} this - */ - wait : function(msg, title, config){ - this.show({ - title : title, - msg : msg, - buttons: false, - closable:false, - wait:true, - modal:true, - minWidth: this.minProgressWidth, - waitConfig: config - }); - return this; - }, - - /** - * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt). - * If a callback function is passed it will be called after the user clicks the button, and the - * id of the button that was clicked will be passed as the only parameter to the callback - * (could also be the top-right close button). - * @param {String} title The title bar text - * @param {String} msg The message box body text - * @param {Function} fn (optional) The callback function invoked after the message box is closed - * @param {Object} scope (optional) The scope of the callback function - * @return {Ext.MessageBox} this - */ - alert : function(title, msg, fn, scope){ - this.show({ - title : title, - msg : msg, - buttons: this.OK, - fn: fn, - scope : scope - }); - return this; - }, - - /** - * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm). - * If a callback function is passed it will be called after the user clicks either button, - * and the id of the button that was clicked will be passed as the only parameter to the callback - * (could also be the top-right close button). - * @param {String} title The title bar text - * @param {String} msg The message box body text - * @param {Function} fn (optional) The callback function invoked after the message box is closed - * @param {Object} scope (optional) The scope of the callback function - * @return {Ext.MessageBox} this - */ - confirm : function(title, msg, fn, scope){ - this.show({ - title : title, - msg : msg, - buttons: this.YESNO, - fn: fn, - scope : scope, - icon: this.QUESTION - }); - return this; - }, - - /** - * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt). - * The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user - * clicks either button, and the id of the button that was clicked (could also be the top-right - * close button) and the text that was entered will be passed as the two parameters to the callback. - * @param {String} title The title bar text - * @param {String} msg The message box body text - * @param {Function} fn (optional) The callback function invoked after the message box is closed - * @param {Object} scope (optional) The scope of the callback function - * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight - * property, or the height in pixels to create the textbox (defaults to false / single-line) - * @param {String} value (optional) Default value of the text input element (defaults to '') - * @return {Ext.MessageBox} this - */ - prompt : function(title, msg, fn, scope, multiline, value){ - this.show({ - title : title, - msg : msg, - buttons: this.OKCANCEL, - fn: fn, - minWidth:250, - scope : scope, - prompt:true, - multiline: multiline, - value: value - }); - return this; - }, - - /** - * Button config that displays a single OK button - * @type Object - */ - OK : {ok:true}, - /** - * Button config that displays a single Cancel button - * @type Object - */ - CANCEL : {cancel:true}, - /** - * Button config that displays OK and Cancel buttons - * @type Object - */ - OKCANCEL : {ok:true, cancel:true}, - /** - * Button config that displays Yes and No buttons - * @type Object - */ - YESNO : {yes:true, no:true}, - /** - * Button config that displays Yes, No and Cancel buttons - * @type Object - */ - YESNOCANCEL : {yes:true, no:true, cancel:true}, - /** - * The CSS class that provides the INFO icon image - * @type String - */ - INFO : 'ext-mb-info', - /** - * The CSS class that provides the WARNING icon image - * @type String - */ - WARNING : 'ext-mb-warning', - /** - * The CSS class that provides the QUESTION icon image - * @type String - */ - QUESTION : 'ext-mb-question', - /** - * The CSS class that provides the ERROR icon image - * @type String - */ - ERROR : 'ext-mb-error', - - /** - * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75) - * @type Number - */ - defaultTextHeight : 75, - /** - * The maximum width in pixels of the message box (defaults to 600) - * @type Number - */ - maxWidth : 600, - /** - * The minimum width in pixels of the message box (defaults to 110) - * @type Number - */ - minWidth : 110, - /** - * The minimum width in pixels of the message box if it is a progress-style dialog. This is useful - * for setting a different minimum width than text-only dialogs may need (defaults to 250) - * @type Number - */ - minProgressWidth : 250, - /** - * An object containing the default button text strings that can be overriden for localized language support. - * Supported properties are: ok, cancel, yes and no. Generally you should include a locale-specific - * resource file for handling language support across the framework. - * Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french - * @type Object - */ - buttonText : { - ok : "OK", - cancel : "Cancel", - yes : "Yes", - no : "No" - } - }; -}(); - -/** - * Shorthand for {@link Ext.MessageBox} - */ +Ext.WindowMgr = new Ext.WindowGroup();/** + * @class Ext.MessageBox + *
Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.
+ *Note that the MessageBox is asynchronous. Unlike a regular JavaScript alert (which will halt
+ * browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code
+ * that should only run after some user feedback from the MessageBox, you must use a callback function
+ * (see the function parameter for {@link #show} for more details).
Example usage:
+ *
+// Basic alert:
+Ext.Msg.alert('Status', 'Changes saved successfully.');
+
+// Prompt for user data and process the result using a callback:
+Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
+ if (btn == 'ok'){
+ // process text value and close...
+ }
+});
+
+// Show a dialog using config options:
+Ext.Msg.show({
+ title:'Save Changes?',
+ msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
+ buttons: Ext.Msg.YESNOCANCEL,
+ fn: processResult,
+ animEl: 'elId',
+ icon: Ext.MessageBox.QUESTION
+});
+Progress and wait dialogs will ignore this option since they do not respond to user + * actions and can only be closed programmatically, so any required function should be called + * by the same code after it closes the dialog. Parameters passed:
+Ext.Msg.show({
+ title: 'Address',
+ msg: 'Please enter your address:',
+ width: 300,
+ buttons: Ext.MessageBox.OKCANCEL,
+ multiline: true,
+ fn: saveAddress,
+ animEl: 'addAddressBtn',
+ icon: Ext.MessageBox.INFO
+});
++Ext.MessageBox.INFO +Ext.MessageBox.WARNING +Ext.MessageBox.QUESTION +Ext.MessageBox.ERROR + *+ * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon + * @return {Ext.MessageBox} this + */ + setIcon : function(icon){ + if(!dlg){ + bufferIcon = icon; + return; + } + bufferIcon = undefined; + if(icon && icon != ''){ + iconEl.removeClass('x-hidden'); + iconEl.replaceClass(iconCls, icon); + bodyEl.addClass('x-dlg-icon'); + iconCls = icon; + }else{ + iconEl.replaceClass(iconCls, 'x-hidden'); + bodyEl.removeClass('x-dlg-icon'); + iconCls = ''; + } + return this; + }, + + /** + * Displays a message box with a progress bar. This message box has no buttons and is not closeable by + * the user. You are responsible for updating the progress bar as needed via {@link Ext.MessageBox#updateProgress} + * and closing the message box when the process is complete. + * @param {String} title The title bar text + * @param {String} msg The message box body text + * @param {String} progressText (optional) The text to display inside the progress bar (defaults to '') + * @return {Ext.MessageBox} this + */ + progress : function(title, msg, progressText){ + this.show({ + title : title, + msg : msg, + buttons: false, + progress:true, + closable:false, + minWidth: this.minProgressWidth, + progressText: progressText + }); + return this; + }, + + /** + * Displays a message box with an infinitely auto-updating progress bar. This can be used to block user + * interaction while waiting for a long-running process to complete that does not have defined intervals. + * You are responsible for closing the message box when the process is complete. + * @param {String} msg The message box body text + * @param {String} title (optional) The title bar text + * @param {Object} config (optional) A {@link Ext.ProgressBar#waitConfig} object + * @return {Ext.MessageBox} this + */ + wait : function(msg, title, config){ + this.show({ + title : title, + msg : msg, + buttons: false, + closable:false, + wait:true, + modal:true, + minWidth: this.minProgressWidth, + waitConfig: config + }); + return this; + }, + + /** + * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt). + * If a callback function is passed it will be called after the user clicks the button, and the + * id of the button that was clicked will be passed as the only parameter to the callback + * (could also be the top-right close button). + * @param {String} title The title bar text + * @param {String} msg The message box body text + * @param {Function} fn (optional) The callback function invoked after the message box is closed + * @param {Object} scope (optional) The scope of the callback function + * @return {Ext.MessageBox} this + */ + alert : function(title, msg, fn, scope){ + this.show({ + title : title, + msg : msg, + buttons: this.OK, + fn: fn, + scope : scope + }); + return this; + }, + + /** + * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm). + * If a callback function is passed it will be called after the user clicks either button, + * and the id of the button that was clicked will be passed as the only parameter to the callback + * (could also be the top-right close button). + * @param {String} title The title bar text + * @param {String} msg The message box body text + * @param {Function} fn (optional) The callback function invoked after the message box is closed + * @param {Object} scope (optional) The scope of the callback function + * @return {Ext.MessageBox} this + */ + confirm : function(title, msg, fn, scope){ + this.show({ + title : title, + msg : msg, + buttons: this.YESNO, + fn: fn, + scope : scope, + icon: this.QUESTION + }); + return this; + }, + + /** + * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt). + * The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user + * clicks either button, and the id of the button that was clicked (could also be the top-right + * close button) and the text that was entered will be passed as the two parameters to the callback. + * @param {String} title The title bar text + * @param {String} msg The message box body text + * @param {Function} fn (optional) The callback function invoked after the message box is closed + * @param {Object} scope (optional) The scope of the callback function + * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight + * property, or the height in pixels to create the textbox (defaults to false / single-line) + * @param {String} value (optional) Default value of the text input element (defaults to '') + * @return {Ext.MessageBox} this + */ + prompt : function(title, msg, fn, scope, multiline, value){ + this.show({ + title : title, + msg : msg, + buttons: this.OKCANCEL, + fn: fn, + minWidth:250, + scope : scope, + prompt:true, + multiline: multiline, + value: value + }); + return this; + }, + + /** + * Button config that displays a single OK button + * @type Object + */ + OK : {ok:true}, + /** + * Button config that displays a single Cancel button + * @type Object + */ + CANCEL : {cancel:true}, + /** + * Button config that displays OK and Cancel buttons + * @type Object + */ + OKCANCEL : {ok:true, cancel:true}, + /** + * Button config that displays Yes and No buttons + * @type Object + */ + YESNO : {yes:true, no:true}, + /** + * Button config that displays Yes, No and Cancel buttons + * @type Object + */ + YESNOCANCEL : {yes:true, no:true, cancel:true}, + /** + * The CSS class that provides the INFO icon image + * @type String + */ + INFO : 'ext-mb-info', + /** + * The CSS class that provides the WARNING icon image + * @type String + */ + WARNING : 'ext-mb-warning', + /** + * The CSS class that provides the QUESTION icon image + * @type String + */ + QUESTION : 'ext-mb-question', + /** + * The CSS class that provides the ERROR icon image + * @type String + */ + ERROR : 'ext-mb-error', + + /** + * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75) + * @type Number + */ + defaultTextHeight : 75, + /** + * The maximum width in pixels of the message box (defaults to 600) + * @type Number + */ + maxWidth : 600, + /** + * The minimum width in pixels of the message box (defaults to 100) + * @type Number + */ + minWidth : 100, + /** + * The minimum width in pixels of the message box if it is a progress-style dialog. This is useful + * for setting a different minimum width than text-only dialogs may need (defaults to 250) + * @type Number + */ + minProgressWidth : 250, + /** + * An object containing the default button text strings that can be overriden for localized language support. + * Supported properties are: ok, cancel, yes and no. Generally you should include a locale-specific + * resource file for handling language support across the framework. + * Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french + * @type Object + */ + buttonText : { + ok : "OK", + cancel : "Cancel", + yes : "Yes", + no : "No" + } + }; +}(); + +/** + * Shorthand for {@link Ext.MessageBox} + */ Ext.Msg = Ext.MessageBox;/** * @class Ext.dd.PanelProxy * A custom drag proxy implementation specific to {@link Ext.Panel}s. This class is primarily used internally