MessageBox.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-window-MessageBox'>/**
  19. </span> * Utility class for generating different styles of message boxes. The singleton instance, Ext.MessageBox
  20. * alias `Ext.Msg` can also be used.
  21. *
  22. * Note that a MessageBox is asynchronous. Unlike a regular JavaScript `alert` (which will halt
  23. * browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code
  24. * that should only run *after* some user feedback from the MessageBox, you must use a callback function
  25. * (see the `function` parameter for {@link #method-show} for more details).
  26. *
  27. * Basic alert
  28. *
  29. * @example
  30. * Ext.Msg.alert('Status', 'Changes saved successfully.');
  31. *
  32. * Prompt for user data and process the result using a callback
  33. *
  34. * @example
  35. * Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
  36. * if (btn == 'ok'){
  37. * // process text value and close...
  38. * }
  39. * });
  40. *
  41. * Show a dialog using config options
  42. *
  43. * @example
  44. * Ext.Msg.show({
  45. * title:'Save Changes?',
  46. * msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
  47. * buttons: Ext.Msg.YESNOCANCEL,
  48. * icon: Ext.Msg.QUESTION
  49. * });
  50. */
  51. Ext.define('Ext.window.MessageBox', {
  52. extend: 'Ext.window.Window',
  53. requires: [
  54. 'Ext.toolbar.Toolbar',
  55. 'Ext.form.field.Text',
  56. 'Ext.form.field.TextArea',
  57. 'Ext.form.field.Display',
  58. 'Ext.button.Button',
  59. 'Ext.layout.container.Anchor',
  60. 'Ext.layout.container.HBox',
  61. 'Ext.ProgressBar'
  62. ],
  63. alias: 'widget.messagebox',
  64. <span id='Ext-window-MessageBox-property-OK'> /**
  65. </span> * @property
  66. * Button config that displays a single OK button
  67. */
  68. OK : 1,
  69. <span id='Ext-window-MessageBox-property-YES'> /**
  70. </span> * @property
  71. * Button config that displays a single Yes button
  72. */
  73. YES : 2,
  74. <span id='Ext-window-MessageBox-property-NO'> /**
  75. </span> * @property
  76. * Button config that displays a single No button
  77. */
  78. NO : 4,
  79. <span id='Ext-window-MessageBox-property-CANCEL'> /**
  80. </span> * @property
  81. * Button config that displays a single Cancel button
  82. */
  83. CANCEL : 8,
  84. <span id='Ext-window-MessageBox-property-OKCANCEL'> /**
  85. </span> * @property
  86. * Button config that displays OK and Cancel buttons
  87. */
  88. OKCANCEL : 9,
  89. <span id='Ext-window-MessageBox-property-YESNO'> /**
  90. </span> * @property
  91. * Button config that displays Yes and No buttons
  92. */
  93. YESNO : 6,
  94. <span id='Ext-window-MessageBox-property-YESNOCANCEL'> /**
  95. </span> * @property
  96. * Button config that displays Yes, No and Cancel buttons
  97. */
  98. YESNOCANCEL : 14,
  99. <span id='Ext-window-MessageBox-property-INFO'> /**
  100. </span> * @property
  101. * The CSS class that provides the INFO icon image
  102. */
  103. INFO : Ext.baseCSSPrefix + 'message-box-info',
  104. <span id='Ext-window-MessageBox-property-WARNING'> /**
  105. </span> * @property
  106. * The CSS class that provides the WARNING icon image
  107. */
  108. WARNING : Ext.baseCSSPrefix + 'message-box-warning',
  109. <span id='Ext-window-MessageBox-property-QUESTION'> /**
  110. </span> * @property
  111. * The CSS class that provides the QUESTION icon image
  112. */
  113. QUESTION : Ext.baseCSSPrefix + 'message-box-question',
  114. <span id='Ext-window-MessageBox-property-ERROR'> /**
  115. </span> * @property
  116. * The CSS class that provides the ERROR icon image
  117. */
  118. ERROR : Ext.baseCSSPrefix + 'message-box-error',
  119. // hide it by offsets. Windows are hidden on render by default.
  120. hideMode: 'offsets',
  121. closeAction: 'hide',
  122. resizable: false,
  123. title: '&amp;#160;',
  124. width: 600,
  125. height: 500,
  126. minWidth: 250,
  127. maxWidth: 600,
  128. minHeight: 110,
  129. maxHeight: 500,
  130. constrain: true,
  131. cls: Ext.baseCSSPrefix + 'message-box',
  132. layout: {
  133. type: 'vbox',
  134. align: 'stretch'
  135. },
  136. <span id='Ext-window-MessageBox-property-defaultTextHeight'> /**
  137. </span> * @property
  138. * The default height in pixels of the message box's multiline textarea if displayed.
  139. */
  140. defaultTextHeight : 75,
  141. <span id='Ext-window-MessageBox-property-minProgressWidth'> /**
  142. </span> * @property
  143. * The minimum width in pixels of the message box if it is a progress-style dialog. This is useful
  144. * for setting a different minimum width than text-only dialogs may need.
  145. */
  146. minProgressWidth : 250,
  147. <span id='Ext-window-MessageBox-property-minPromptWidth'> /**
  148. </span> * @property
  149. * The minimum width in pixels of the message box if it is a prompt dialog. This is useful
  150. * for setting a different minimum width than text-only dialogs may need.
  151. */
  152. minPromptWidth: 250,
  153. //&lt;locale type=&quot;object&quot;&gt;
  154. <span id='Ext-window-MessageBox-property-buttonText'> /**
  155. </span> * @property
  156. * An object containing the default button text strings that can be overriden for localized language support.
  157. * Supported properties are: ok, cancel, yes and no. Generally you should include a locale-specific
  158. * resource file for handling language support across the framework.
  159. * Customize the default text like so:
  160. *
  161. * Ext.window.MessageBox.buttonText.yes = &quot;oui&quot;; //french
  162. */
  163. buttonText: {
  164. ok: 'OK',
  165. yes: 'Yes',
  166. no: 'No',
  167. cancel: 'Cancel'
  168. },
  169. //&lt;/locale&gt;
  170. buttonIds: [
  171. 'ok', 'yes', 'no', 'cancel'
  172. ],
  173. //&lt;locale type=&quot;object&quot;&gt;
  174. titleText: {
  175. confirm: 'Confirm',
  176. prompt: 'Prompt',
  177. wait: 'Loading...',
  178. alert: 'Attention'
  179. },
  180. //&lt;/locale&gt;
  181. iconHeight: 35,
  182. makeButton: function(btnIdx) {
  183. var btnId = this.buttonIds[btnIdx];
  184. return new Ext.button.Button({
  185. handler: this.btnCallback,
  186. itemId: btnId,
  187. scope: this,
  188. text: this.buttonText[btnId],
  189. minWidth: 75
  190. });
  191. },
  192. btnCallback: function(btn) {
  193. var me = this,
  194. value,
  195. field;
  196. if (me.cfg.prompt || me.cfg.multiline) {
  197. if (me.cfg.multiline) {
  198. field = me.textArea;
  199. } else {
  200. field = me.textField;
  201. }
  202. value = field.getValue();
  203. field.reset();
  204. }
  205. // Important not to have focus remain in the hidden Window; Interferes with DnD.
  206. btn.blur();
  207. me.hide();
  208. me.userCallback(btn.itemId, value, me.cfg);
  209. },
  210. hide: function() {
  211. var me = this;
  212. me.dd.endDrag();
  213. me.progressBar.reset();
  214. me.removeCls(me.cfg.cls);
  215. me.callParent(arguments);
  216. },
  217. initComponent: function() {
  218. var me = this,
  219. baseId = me.id,
  220. i, button,
  221. tbLayout;
  222. me.title = '&amp;#160;';
  223. me.topContainer = new Ext.container.Container({
  224. layout: 'hbox',
  225. style: {
  226. padding: '10px',
  227. overflow: 'hidden'
  228. },
  229. items: [
  230. me.iconComponent = new Ext.Component({
  231. cls: me.baseCls + '-icon',
  232. width: 50,
  233. height: me.iconHeight
  234. }),
  235. me.promptContainer = new Ext.container.Container({
  236. flex: 1,
  237. layout: {
  238. type: 'anchor'
  239. },
  240. items: [
  241. me.msg = new Ext.form.field.Display({
  242. id: baseId + '-displayfield',
  243. cls: me.baseCls + '-text'
  244. }),
  245. me.textField = new Ext.form.field.Text({
  246. id: baseId + '-testfield',
  247. anchor: '100%',
  248. enableKeyEvents: true,
  249. listeners: {
  250. keydown: me.onPromptKey,
  251. scope: me
  252. }
  253. }),
  254. me.textArea = new Ext.form.field.TextArea({
  255. id: baseId + '-textarea',
  256. anchor: '100%',
  257. height: 75
  258. })
  259. ]
  260. })
  261. ]
  262. });
  263. me.progressBar = new Ext.ProgressBar({
  264. id: baseId + '-progressbar',
  265. margins: '0 10 0 10'
  266. });
  267. me.items = [me.topContainer, me.progressBar];
  268. // Create the buttons based upon passed bitwise config
  269. me.msgButtons = [];
  270. for (i = 0; i &lt; 4; i++) {
  271. button = me.makeButton(i);
  272. me.msgButtons[button.itemId] = button;
  273. me.msgButtons.push(button);
  274. }
  275. me.bottomTb = new Ext.toolbar.Toolbar({
  276. id: baseId + '-toolbar',
  277. ui: 'footer',
  278. dock: 'bottom',
  279. layout: {
  280. pack: 'center'
  281. },
  282. items: [
  283. me.msgButtons[0],
  284. me.msgButtons[1],
  285. me.msgButtons[2],
  286. me.msgButtons[3]
  287. ]
  288. });
  289. me.dockedItems = [me.bottomTb];
  290. // Get control at Toolbar's finishedLayout call and snag the contentWidth to contribute to our auto width calculation
  291. tbLayout = me.bottomTb.getLayout();
  292. tbLayout.finishedLayout = Ext.Function.createInterceptor(tbLayout.finishedLayout, function(ownerContext) {
  293. me.tbWidth = ownerContext.getProp('contentWidth');
  294. });
  295. me.on('close', me.onClose, me);
  296. me.callParent();
  297. },
  298. onClose: function(){
  299. var btn = this.header.child('[type=close]');
  300. // Give a temporary itemId so it can act like the cancel button
  301. btn.itemId = 'cancel';
  302. this.btnCallback(btn);
  303. delete btn.itemId;
  304. },
  305. onPromptKey: function(textField, e) {
  306. var me = this,
  307. blur;
  308. if (e.keyCode === Ext.EventObject.RETURN || e.keyCode === 10) {
  309. if (me.msgButtons.ok.isVisible()) {
  310. blur = true;
  311. me.msgButtons.ok.handler.call(me, me.msgButtons.ok);
  312. } else if (me.msgButtons.yes.isVisible()) {
  313. me.msgButtons.yes.handler.call(me, me.msgButtons.yes);
  314. blur = true;
  315. }
  316. if (blur) {
  317. me.textField.blur();
  318. }
  319. }
  320. },
  321. reconfigure: function(cfg) {
  322. var me = this,
  323. buttons = 0,
  324. hideToolbar = true,
  325. initialWidth = me.maxWidth,
  326. oldButtonText = me.buttonText,
  327. i;
  328. // Restore default buttonText before reconfiguring.
  329. me.updateButtonText();
  330. cfg = cfg || {};
  331. me.cfg = cfg;
  332. if (cfg.width) {
  333. initialWidth = cfg.width;
  334. }
  335. // Default to allowing the Window to take focus.
  336. delete me.defaultFocus;
  337. // clear any old animateTarget
  338. me.animateTarget = cfg.animateTarget || undefined;
  339. // Defaults to modal
  340. me.modal = cfg.modal !== false;
  341. // Show the title
  342. if (cfg.title) {
  343. me.setTitle(cfg.title||'&amp;#160;');
  344. }
  345. // Extract button configs
  346. if (Ext.isObject(cfg.buttons)) {
  347. me.buttonText = cfg.buttons;
  348. buttons = 0;
  349. } else {
  350. me.buttonText = cfg.buttonText || me.buttonText;
  351. buttons = Ext.isNumber(cfg.buttons) ? cfg.buttons : 0;
  352. }
  353. // Apply custom-configured buttonText
  354. // Infer additional buttons from the specified property names in the buttonText object
  355. buttons = buttons | me.updateButtonText();
  356. // Restore buttonText. Next run of reconfigure will restore to prototype's buttonText
  357. me.buttonText = oldButtonText;
  358. // During the on render, or size resetting layouts, and in subsequent hiding and showing, we need to
  359. // suspend layouts, and flush at the end when the Window's children are at their final visibility.
  360. Ext.suspendLayouts();
  361. me.hidden = false;
  362. if (!me.rendered) {
  363. me.width = initialWidth;
  364. me.render(Ext.getBody());
  365. } else {
  366. me.setSize(initialWidth, me.maxHeight);
  367. }
  368. // Hide or show the close tool
  369. me.closable = cfg.closable &amp;&amp; !cfg.wait;
  370. me.header.child('[type=close]').setVisible(cfg.closable !== false);
  371. // Hide or show the header
  372. if (!cfg.title &amp;&amp; !me.closable) {
  373. me.header.hide();
  374. } else {
  375. me.header.show();
  376. }
  377. // Default to dynamic drag: drag the window, not a ghost
  378. me.liveDrag = !cfg.proxyDrag;
  379. // wrap the user callback
  380. me.userCallback = Ext.Function.bind(cfg.callback ||cfg.fn || Ext.emptyFn, cfg.scope || Ext.global);
  381. // Hide or show the icon Component
  382. me.setIcon(cfg.icon);
  383. // Hide or show the message area
  384. if (cfg.msg) {
  385. me.msg.setValue(cfg.msg);
  386. me.msg.show();
  387. } else {
  388. me.msg.hide();
  389. }
  390. // flush the layout here to pick up
  391. // height adjustments on the msg field
  392. Ext.resumeLayouts(true);
  393. Ext.suspendLayouts();
  394. // Hide or show the input field
  395. if (cfg.prompt || cfg.multiline) {
  396. me.multiline = cfg.multiline;
  397. if (cfg.multiline) {
  398. me.textArea.setValue(cfg.value);
  399. me.textArea.setHeight(cfg.defaultTextHeight || me.defaultTextHeight);
  400. me.textArea.show();
  401. me.textField.hide();
  402. me.defaultFocus = me.textArea;
  403. } else {
  404. me.textField.setValue(cfg.value);
  405. me.textArea.hide();
  406. me.textField.show();
  407. me.defaultFocus = me.textField;
  408. }
  409. } else {
  410. me.textArea.hide();
  411. me.textField.hide();
  412. }
  413. // Hide or show the progress bar
  414. if (cfg.progress || cfg.wait) {
  415. me.progressBar.show();
  416. me.updateProgress(0, cfg.progressText);
  417. if(cfg.wait === true){
  418. me.progressBar.wait(cfg.waitConfig);
  419. }
  420. } else {
  421. me.progressBar.hide();
  422. }
  423. // Hide or show buttons depending on flag value sent.
  424. for (i = 0; i &lt; 4; i++) {
  425. if (buttons &amp; Math.pow(2, i)) {
  426. // Default to focus on the first visible button if focus not already set
  427. if (!me.defaultFocus) {
  428. me.defaultFocus = me.msgButtons[i];
  429. }
  430. me.msgButtons[i].show();
  431. hideToolbar = false;
  432. } else {
  433. me.msgButtons[i].hide();
  434. }
  435. }
  436. // Hide toolbar if no buttons to show
  437. if (hideToolbar) {
  438. me.bottomTb.hide();
  439. } else {
  440. me.bottomTb.show();
  441. }
  442. Ext.resumeLayouts(true);
  443. },
  444. <span id='Ext-window-MessageBox-method-updateButtonText'> /**
  445. </span> * @private
  446. * Set button text according to current buttonText property object
  447. * @return {Number} The buttons bitwise flag based upon the button IDs specified in the buttonText property.
  448. */
  449. updateButtonText: function() {
  450. var me = this,
  451. buttonText = me.buttonText,
  452. buttons = 0,
  453. btnId,
  454. btn;
  455. for (btnId in buttonText) {
  456. if (buttonText.hasOwnProperty(btnId)) {
  457. btn = me.msgButtons[btnId];
  458. if (btn) {
  459. if (me.cfg &amp;&amp; me.cfg.buttonText) {
  460. buttons = buttons | Math.pow(2, Ext.Array.indexOf(me.buttonIds, btnId));
  461. }
  462. if (btn.text != buttonText[btnId]) {
  463. btn.setText(buttonText[btnId]);
  464. }
  465. }
  466. }
  467. }
  468. return buttons;
  469. },
  470. <span id='Ext-window-MessageBox-method-show'> /**
  471. </span> * Displays a new message box, or reinitializes an existing message box, based on the config options passed in. All
  472. * display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally, although those calls
  473. * are basic shortcuts and do not support all of the config options allowed here.
  474. *
  475. * Example usage:
  476. *
  477. * Ext.Msg.show({
  478. * title: 'Address',
  479. * msg: 'Please enter your address:',
  480. * width: 300,
  481. * buttons: Ext.Msg.OKCANCEL,
  482. * multiline: true,
  483. * fn: saveAddress,
  484. * animateTarget: 'addAddressBtn',
  485. * icon: Ext.window.MessageBox.INFO
  486. * });
  487. *
  488. * @param {Object} config The following config options are supported:
  489. *
  490. * @param {String/Ext.dom.Element} config.animateTarget
  491. * An id or Element from which the message box should animate as it opens and closes.
  492. *
  493. * @param {Number} [config.buttons=false]
  494. * A bitwise button specifier consisting of the sum of any of the following constants:
  495. *
  496. * - Ext.MessageBox.OK
  497. * - Ext.MessageBox.YES
  498. * - Ext.MessageBox.NO
  499. * - Ext.MessageBox.CANCEL
  500. *
  501. * Some common combinations have already been predefined:
  502. *
  503. * - Ext.MessageBox.OKCANCEL
  504. * - Ext.MessageBox.YESNO
  505. * - Ext.MessageBox.YESNOCANCEL
  506. *
  507. * Or false to not show any buttons.
  508. *
  509. * This may also be specified as an object hash containing custom button text in the same format as the
  510. * {@link #buttonText} config. Button IDs present as property names will be made visible.
  511. *
  512. * @param {Boolean} config.closable
  513. * False to hide the top-right close button (defaults to true). Note that progress and wait dialogs will ignore this
  514. * property and always hide the close button as they can only be closed programmatically.
  515. *
  516. * @param {String} config.cls
  517. * A custom CSS class to apply to the message box's container element
  518. *
  519. * @param {Number} [config.defaultTextHeight=75]
  520. * The default height in pixels of the message box's multiline textarea if displayed.
  521. *
  522. * @param {Function} config.fn
  523. * A callback function which is called when the dialog is dismissed either by clicking on the configured buttons, or
  524. * on the dialog close button, or by pressing the return button to enter input.
  525. *
  526. * Progress and wait dialogs will ignore this option since they do not respond to user actions and can only be
  527. * closed programmatically, so any required function should be called by the same code after it closes the dialog.
  528. * Parameters passed:
  529. *
  530. * @param {String} config.fn.buttonId The ID of the button pressed, one of:
  531. *
  532. * - ok
  533. * - yes
  534. * - no
  535. * - cancel
  536. *
  537. * @param {String} config.fn.text Value of the input field if either `prompt` or `multiline` is true
  538. * @param {Object} config.fn.opt The config object passed to show.
  539. *
  540. * @param {Object} config.buttonText
  541. * An object containing string properties which override the system-supplied button text values just for this
  542. * invocation. The property names are:
  543. *
  544. * - ok
  545. * - yes
  546. * - no
  547. * - cancel
  548. *
  549. * @param {Object} config.scope
  550. * The scope (`this` reference) in which the function will be executed.
  551. *
  552. * @param {String} config.icon
  553. * A CSS class that provides a background image to be used as the body icon for the dialog.
  554. * One can use a predefined icon class:
  555. *
  556. * - Ext.MessageBox.INFO
  557. * - Ext.MessageBox.WARNING
  558. * - Ext.MessageBox.QUESTION
  559. * - Ext.MessageBox.ERROR
  560. *
  561. * or use just any `'custom-class'`. Defaults to empty string.
  562. *
  563. * @param {String} config.iconCls
  564. * The standard {@link Ext.window.Window#iconCls} to add an optional header icon (defaults to '')
  565. *
  566. * @param {Number} config.maxWidth
  567. * The maximum width in pixels of the message box (defaults to 600)
  568. *
  569. * @param {Number} config.minWidth
  570. * The minimum width in pixels of the message box (defaults to 100)
  571. *
  572. * @param {Boolean} config.modal
  573. * False to allow user interaction with the page while the message box is displayed (defaults to true)
  574. *
  575. * @param {String} config.msg
  576. * A string that will replace the existing message box body text (defaults to the XHTML-compliant non-breaking space
  577. * character '&amp;#160;')
  578. *
  579. * @param {Boolean} config.multiline
  580. * True to prompt the user to enter multi-line text (defaults to false)
  581. *
  582. * @param {Boolean} config.progress
  583. * True to display a progress bar (defaults to false)
  584. *
  585. * @param {String} config.progressText
  586. * The text to display inside the progress bar if progress = true (defaults to '')
  587. *
  588. * @param {Boolean} config.prompt
  589. * True to prompt the user to enter single-line text (defaults to false)
  590. *
  591. * @param {Boolean} config.proxyDrag
  592. * True to display a lightweight proxy while dragging (defaults to false)
  593. *
  594. * @param {String} config.title
  595. * The title text
  596. *
  597. * @param {String} config.value
  598. * The string value to set into the active textbox element if displayed
  599. *
  600. * @param {Boolean} config.wait
  601. * True to display a progress bar (defaults to false)
  602. *
  603. * @param {Object} config.waitConfig
  604. * A {@link Ext.ProgressBar#wait} config object (applies only if wait = true)
  605. *
  606. * @param {Number} config.width
  607. * The width of the dialog in pixels
  608. *
  609. * @return {Ext.window.MessageBox} this
  610. */
  611. show: function(cfg) {
  612. var me = this;
  613. me.reconfigure(cfg);
  614. me.addCls(cfg.cls);
  615. me.doAutoSize();
  616. // Set the flag, so that the parent show method performs the show procedure that we need.
  617. // ie: animation from animTarget, onShow processing and focusing.
  618. me.hidden = true;
  619. me.callParent();
  620. return me;
  621. },
  622. onShow: function() {
  623. this.callParent(arguments);
  624. this.center();
  625. },
  626. doAutoSize: function() {
  627. var me = this,
  628. headerVisible = me.header.rendered &amp;&amp; me.header.isVisible(),
  629. footerVisible = me.bottomTb.rendered &amp;&amp; me.bottomTb.isVisible(),
  630. width,
  631. height;
  632. if (!Ext.isDefined(me.frameWidth)) {
  633. me.frameWidth = me.el.getWidth() - me.body.getWidth();
  634. }
  635. // Allow per-invocation override of minWidth
  636. me.minWidth = me.cfg.minWidth || Ext.getClass(this).prototype.minWidth;
  637. // Width must be max of titleWidth, message+icon width, and total button width
  638. width = Math.max(
  639. headerVisible ? me.header.getMinWidth() : 0, // title width
  640. me.cfg.width || me.msg.getWidth() + me.iconComponent.getWidth() + 25, // msg + icon width + topContainer's layout padding */
  641. (footerVisible ? me.tbWidth : 0)// total button width
  642. );
  643. height = (headerVisible ? me.header.getHeight() : 0) +
  644. me.topContainer.getHeight() +
  645. me.progressBar.getHeight() +
  646. (footerVisible ? me.bottomTb.getHeight() + me.bottomTb.el.getMargin('tb') : 0);
  647. me.setSize(width + me.frameWidth, height + me.frameWidth);
  648. return me;
  649. },
  650. updateText: function(text) {
  651. this.msg.setValue(text);
  652. return this.doAutoSize(true);
  653. },
  654. <span id='Ext-window-MessageBox-method-setIcon'> /**
  655. </span> * Adds the specified icon to the dialog. By default, the class 'x-messagebox-icon' is applied for default
  656. * styling, and the class passed in is expected to supply the background image url. Pass in empty string ('')
  657. * to clear any existing icon. This method must be called before the MessageBox is shown.
  658. * The following built-in icon classes are supported, but you can also pass in a custom class name:
  659. *
  660. * Ext.window.MessageBox.INFO
  661. * Ext.window.MessageBox.WARNING
  662. * Ext.window.MessageBox.QUESTION
  663. * Ext.window.MessageBox.ERROR
  664. *
  665. * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon
  666. * @return {Ext.window.MessageBox} this
  667. */
  668. setIcon : function(icon) {
  669. var me = this;
  670. me.iconComponent.removeCls(me.messageIconCls);
  671. if (icon) {
  672. me.iconComponent.show();
  673. me.iconComponent.addCls(Ext.baseCSSPrefix + 'dlg-icon');
  674. me.iconComponent.addCls(me.messageIconCls = icon);
  675. } else {
  676. me.iconComponent.removeCls(Ext.baseCSSPrefix + 'dlg-icon');
  677. me.iconComponent.hide();
  678. }
  679. return me;
  680. },
  681. <span id='Ext-window-MessageBox-method-updateProgress'> /**
  682. </span> * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
  683. * initiated via {@link Ext.window.MessageBox#progress} or {@link Ext.window.MessageBox#wait},
  684. * or by calling {@link Ext.window.MessageBox#method-show} with progress: true.
  685. *
  686. * @param {Number} [value=0] Any number between 0 and 1 (e.g., .5)
  687. * @param {String} [progressText=''] The progress text to display inside the progress bar.
  688. * @param {String} [msg] The message box's body text is replaced with the specified string (defaults to undefined
  689. * so that any existing body text will not get overwritten by default unless a new value is passed in)
  690. * @return {Ext.window.MessageBox} this
  691. */
  692. updateProgress : function(value, progressText, msg){
  693. this.progressBar.updateProgress(value, progressText);
  694. if (msg){
  695. this.updateText(msg);
  696. }
  697. return this;
  698. },
  699. onEsc: function() {
  700. if (this.closable !== false) {
  701. this.callParent(arguments);
  702. }
  703. },
  704. <span id='Ext-window-MessageBox-method-confirm'> /**
  705. </span> * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
  706. * If a callback function is passed it will be called after the user clicks either button,
  707. * and the id of the button that was clicked will be passed as the only parameter to the callback
  708. * (could also be the top-right close button, which will always report as &quot;cancel&quot;).
  709. *
  710. * @param {String} title The title bar text
  711. * @param {String} msg The message box body text
  712. * @param {Function} [fn] The callback function invoked after the message box is closed.
  713. * See {@link #method-show} method for details.
  714. * @param {Object} [scope=window] The scope (`this` reference) in which the callback is executed.
  715. * @return {Ext.window.MessageBox} this
  716. */
  717. confirm: function(cfg, msg, fn, scope) {
  718. if (Ext.isString(cfg)) {
  719. cfg = {
  720. title: cfg,
  721. icon: this.QUESTION,
  722. msg: msg,
  723. buttons: this.YESNO,
  724. callback: fn,
  725. scope: scope
  726. };
  727. }
  728. return this.show(cfg);
  729. },
  730. <span id='Ext-window-MessageBox-method-prompt'> /**
  731. </span> * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).
  732. * The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user
  733. * clicks either button, and the id of the button that was clicked (could also be the top-right
  734. * close button, which will always report as &quot;cancel&quot;) and the text that was entered will be passed as the two parameters to the callback.
  735. *
  736. * @param {String} title The title bar text
  737. * @param {String} msg The message box body text
  738. * @param {Function} [fn] The callback function invoked after the message box is closed.
  739. * See {@link #method-show} method for details.
  740. * @param {Object} [scope=window] The scope (`this` reference) in which the callback is executed.
  741. * @param {Boolean/Number} [multiline=false] True to create a multiline textbox using the defaultTextHeight
  742. * property, or the height in pixels to create the textbox/
  743. * @param {String} [value=''] Default value of the text input element
  744. * @return {Ext.window.MessageBox} this
  745. */
  746. prompt : function(cfg, msg, fn, scope, multiline, value){
  747. if (Ext.isString(cfg)) {
  748. cfg = {
  749. prompt: true,
  750. title: cfg,
  751. minWidth: this.minPromptWidth,
  752. msg: msg,
  753. buttons: this.OKCANCEL,
  754. callback: fn,
  755. scope: scope,
  756. multiline: multiline,
  757. value: value
  758. };
  759. }
  760. return this.show(cfg);
  761. },
  762. <span id='Ext-window-MessageBox-method-wait'> /**
  763. </span> * Displays a message box with an infinitely auto-updating progress bar. This can be used to block user
  764. * interaction while waiting for a long-running process to complete that does not have defined intervals.
  765. * You are responsible for closing the message box when the process is complete.
  766. *
  767. * @param {String} msg The message box body text
  768. * @param {String} [title] The title bar text
  769. * @param {Object} [config] A {@link Ext.ProgressBar#wait} config object
  770. * @return {Ext.window.MessageBox} this
  771. */
  772. wait : function(cfg, title, config){
  773. if (Ext.isString(cfg)) {
  774. cfg = {
  775. title : title,
  776. msg : cfg,
  777. closable: false,
  778. wait: true,
  779. modal: true,
  780. minWidth: this.minProgressWidth,
  781. waitConfig: config
  782. };
  783. }
  784. return this.show(cfg);
  785. },
  786. <span id='Ext-window-MessageBox-method-alert'> /**
  787. </span> * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
  788. * If a callback function is passed it will be called after the user clicks the button, and the
  789. * id of the button that was clicked will be passed as the only parameter to the callback
  790. * (could also be the top-right close button, which will always report as &quot;cancel&quot;).
  791. *
  792. * @param {String} title The title bar text
  793. * @param {String} msg The message box body text
  794. * @param {Function} [fn] The callback function invoked after the message box is closed.
  795. * See {@link #method-show} method for details.
  796. * @param {Object} [scope=window] The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the callback is executed.
  797. * @return {Ext.window.MessageBox} this
  798. */
  799. alert: function(cfg, msg, fn, scope) {
  800. if (Ext.isString(cfg)) {
  801. cfg = {
  802. title : cfg,
  803. msg : msg,
  804. buttons: this.OK,
  805. fn: fn,
  806. scope : scope,
  807. minWidth: this.minWidth
  808. };
  809. }
  810. return this.show(cfg);
  811. },
  812. <span id='Ext-window-MessageBox-method-progress'> /**
  813. </span> * Displays a message box with a progress bar.
  814. *
  815. * You are responsible for updating the progress bar as needed via {@link Ext.window.MessageBox#updateProgress}
  816. * and closing the message box when the process is complete.
  817. *
  818. * @param {String} title The title bar text
  819. * @param {String} msg The message box body text
  820. * @param {String} [progressText=''] The text to display inside the progress bar
  821. * @return {Ext.window.MessageBox} this
  822. */
  823. progress : function(cfg, msg, progressText){
  824. if (Ext.isString(cfg)) {
  825. cfg = {
  826. title: cfg,
  827. msg: msg,
  828. progress: true,
  829. progressText: progressText
  830. };
  831. }
  832. return this.show(cfg);
  833. }
  834. }, function() {
  835. <span id='Ext-MessageBox'> /**
  836. </span> * @class Ext.MessageBox
  837. * @alternateClassName Ext.Msg
  838. * @extends Ext.window.MessageBox
  839. * @singleton
  840. * Singleton instance of {@link Ext.window.MessageBox}.
  841. */
  842. Ext.MessageBox = Ext.Msg = new this();
  843. });</pre>
  844. </body>
  845. </html>