Ext.define('Ext.window.MessageBoxWindow', { extend: 'Ext.window.Window', requires: [ 'Ext.toolbar.Toolbar', 'Ext.form.Text', 'Ext.form.TextArea', 'Ext.button.Button', 'Ext.layout.container.Anchor', 'Ext.layout.container.HBox', 'Ext.ProgressBar' ], alias: 'widget.messagebox', /** * Button config that displays a single OK button * @type Number */ OK : 1, /** * Button config that displays a single Yes button * @type Number */ YES : 2, /** * Button config that displays a single No button * @type Number */ NO : 4, /** * Button config that displays a single Cancel button * @type Number */ CANCEL : 8, /** * Button config that displays OK and Cancel buttons * @type Number */ OKCANCEL : 9, /** * Button config that displays Yes and No buttons * @type Number */ YESNO : 6, /** * Button config that displays Yes, No and Cancel buttons * @type Number */ YESNOCANCEL : 14, /** * 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', // hide it by offsets. Windows are hidden on render by default. hideMode: 'offsets', closeAction: 'hide', title: ' ', width: 600, height: 110, minWidth: 100, maxWidth: 600, minHeight: 110, cls: Ext.baseCSSPrefix + 'message-box', layout: { type: 'anchor' }, /** * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75) * @type Number */ defaultTextHeight : 75, /** * 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, /** * The minimum width in pixels of the message box if it is a prompt dialog. This is useful * for setting a different minimum width than text-only dialogs may need (defaults to 250). * @type Number */ minPromptWidth: 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', yes: 'Yes', no: 'No', cancel: 'Cancel' }, buttonIds: [ 'ok', 'yes', 'no', 'cancel' ], titleText: { confirm: 'Confirm', prompt: 'Prompt', wait: 'Loading...', alert: 'Attention' }, makeButton: function(btnIdx) { var btnId = this.buttonIds[btnIdx]; return Ext.create('Ext.button.Button', { handler: this.btnCallback, name: btnId, scope: this, text: this.buttonText[btnId], hidden: true, minWidth: 75 }); }, btnCallback: function(btn) { var me = this, value, field; if (me.cfg.prompt) { if (me.multiline) { field = me.textArea; } else { field = me.textField; } value = field.getValue(); field.reset(); } // Important not to have focus remain in the hidden Window; Interferes with DnD. btn.blur(); me.hide(); me.userCallback(btn.name, value, me.cfg); }, hide: function() { this.progressBar.reset(); this.removeCls(this.cfg.cls); this.callParent(); }, initComponent: function() { var me = this, i; me.title = ' '; me.topContainer = new Ext.container.Container({ anchor: '100%', layout: { padding: 10, type: 'hbox' }, items: [ me.iconComponent = new Ext.Component({ cls: 'ext-mb-icon', width: 50, height: 35, margins: '0 10 0 0' }), me.promptContainer = new Ext.container.Container({ flex: 1, layout: { type: 'anchor' }, defaults: { hideLabel: true, labelWidth: 0 }, items: [ me.msg = new Ext.Component({ autoEl: { tag: 'span' }, cls: 'ext-mb-text' }), me.textField = new Ext.form.Text({ anchor: '100%', hideLabel: true }), me.textArea = new Ext.form.TextArea({ anchor: '100%', hideLabel: true, height: 75 }) ] }) ] }); me.progressBar = new Ext.ProgressBar({ anchor: '-10', style: 'margin-left:10px' }); me.items = [me.topContainer, me.progressBar]; // Create the buttons based upon passed bitwise config me.msgButtons = []; for (i = 0; i < 4; i++) { me.msgButtons.push(me.makeButton(i)); } me.bottomTb = new Ext.toolbar.Toolbar({ ui: 'footer', dock: 'bottom', items: [ {xtype: 'component', flex: 1}, me.msgButtons[0], me.msgButtons[1], me.msgButtons[2], me.msgButtons[3], {xtype: 'component', flex: 1} ] }); me.dockedItems = [me.bottomTb]; me.callParent(); }, reconfigure: function(cfg) { var me = this, buttons = cfg.buttons || 0, hideToolbar = true; cfg = cfg || {}; me.cfg = cfg; // Default to allowing the Window to take focus. delete me.defaultFous; // Clear the hidden flag so that the elements are sized correctly before being shown // This is because the elements needs to be measured when updated. me.hidden = false; if (!me.rendered) { me.render(Ext.getBody()); me.frameHeight = me.el.getHeight() - me.body.getHeight(); me.frameWidth = me.el.getWidth() - me.body.getWidth(); } else { me.setSize(me.maxWidth, me.minHeight); } me.hidden = true; // wrap the user callback me.userCallback = Ext.Function.bind(cfg.callback || Ext.emptyFn, cfg.scope || Ext.global); // Defaults to modal me.modal = cfg.modal !== false; // Show the title if (cfg.title) { me.setTitle(cfg.title||' '); } // Hide or show the close tool me.closable = cfg.closable; if (cfg.closable === false) { me.tools.close.hide(); } else { me.tools.close.show(); } // Hide or show the icon Component if (cfg.icon) { me.iconComponent.show(); me.iconComponent.removeCls(me.iconCls); me.iconComponent.addCls(me.iconCls = cfg.icon); } else { me.iconComponent.hide(); } // Hide or show the message area if (cfg.msg) { me.msg.update(cfg.msg); me.msg.show(); } else { me.msg.hide(); } // Hide or show the input field if (cfg.prompt || cfg.multiline) { me.multiline = cfg.multiline; if (cfg.multiline) { me.textArea.setValue(cfg.value); me.textArea.setHeight(cfg.defaultTextHeight || me.defaultTextHeight); me.textArea.show(); me.textField.hide(); me.defaultFocus = me.textArea; } else { me.textField.setValue(cfg.value); me.textArea.hide(); me.textField.show(); me.defaultFocus = me.textField; } } else { me.textArea.hide(); me.textField.hide(); } // Hide or show the progress bar if (cfg.progress || cfg.wait) { me.progressBar.show(); me.updateProgress(0, cfg.progressText); if(cfg.wait === true){ me.progressBar.wait(cfg.waitConfig); } } else { me.progressBar.hide(); } // Hide or show buttons depending on flag value sent. for (i = 0; i < 4; i++) { if (buttons & Math.pow(2, i)) { // Default to focus on the first visible button if focus not already set if (!me.defaultFocus) { me.defaultFocus = me.msgButtons[i]; } me.msgButtons[i].show(); hideToolbar = false; } else { me.msgButtons[i].hide(); } } // Hide toolbar if no buttons to show if (hideToolbar) { me.bottomTb.hide(); } else { me.bottomTb.show(); } }, /** * Displays a new message box, or reinitializes an existing message box, based on the config options * passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally, * although those calls are basic shortcuts and do not support all of the config options allowed here. * @param {Object} config The following config options are supported:
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
});
* @return {Ext.MessageBox} this
*/
show: function(cfg) {
var me = this;
me.reconfigure(cfg);
me.callParent();
return me.doAutoSize();
},
doAutoSize: function() {
var me = this;
// Allow per-invocation override of minWidth
me.minWidth = me.cfg.minWidth || Ext.getClass(this).prototype.minWidth;
// Set best possible size based upon allowing the text to wrap in the maximized Window, and
// then constraining it to within the max with. Then adding up constituent element heights.
me.promptContainer.el.setHeight('auto');
var width = me.cfg.width || me.msg.getWidth() + (me.iconComponent.isVisible() ? me.iconComponent.getWidth() + 10 : 0) + 20, /* topContainer's layout padding */
height = Math.max(me.promptContainer.getHeight(), me.iconComponent.getHeight()) +
(me.progressBar.isVisible() ? me.progressBar.getHeight() : 0) +
(me.bottomTb.isVisible() ? me.bottomTb.getHeight() : 0) + 20 ;/* topContainer's layout padding */
me.setSize(width + me.frameWidth, height + me.frameHeight);
me.center();
return me;
},
updateText: function(text) {
this.msg.update(text);
return this.doAutoSize();
},
/**
* Updates a progress-style message box's text and progress bar. Only relevant on message boxes
* initiated via {@link Ext.MessageBox#progress} or {@link Ext.MessageBox#wait},
* or by calling {@link Ext.MessageBox#show} with progress: true.
* @param {Number} value Any number between 0 and 1 (e.g., .5, defaults to 0)
* @param {String} progressText The progress text to display inside the progress bar (defaults to '')
* @param {String} msg The message box's body text is replaced with the specified string (defaults to undefined
* so that any existing body text will not get overwritten by default unless a new value is passed in)
* @return {Ext.MessageBox} this
*/
updateProgress : function(value, progressText, msg){
this.progressBar.updateProgress(value, progressText);
if (msg){
this.updateText(msg);
}
return this;
},
onEsc: function() {
if (this.closable !== false) {
this.callParent(arguments);
}
},
confirm: function(cfg, msg, fn, scope) {
if (Ext.isString(cfg)) {
cfg = {
title: cfg,
icon: 'ext-mb-question',
msg: msg,
buttons: this.YESNO,
callback: fn,
scope: scope
};
}
return this.show(cfg);
},
prompt : function(cfg, msg, fn, scope, multiline, value){
if (Ext.isString(cfg)) {
cfg = {
prompt: true,
title: cfg,
icon: 'ext-mb-question',
msg: msg,
buttons: this.OKCANCEL,
callback: fn,
scope: scope,
multiline: multiline,
value: value
};
}
return this.show(cfg);
},
wait : function(cfg, title, config){
if (Ext.isString(cfg)) {
cfg = {
title : title,
msg : cfg,
closable: false,
wait: true,
modal: true,
minWidth: this.minProgressWidth,
waitConfig: config
};
}
return this.show(cfg);
},
alert: function(cfg, msg, fn, scope) {
if (Ext.isString(cfg)) {
cfg = {
title : cfg,
msg : msg,
buttons: this.OK,
fn: fn,
scope : scope,
minWidth: this.minWidth
};
}
return this.show(cfg);
},
progress : function(cfg, msg, progressText){
if (Ext.isString(cfg)) {
cfg = {
title: cfg,
msg: msg,
progressText: progressText
};
}
return this.show(cfg);
}
}, function() {
Ext.MessageBox = Ext.Msg = new this();
});