msg-box.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. /*
  2. * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com
  3. *
  4. * http://extjs.com/license
  5. */
  6. Ext.onReady(function() {
  7. Ext.get('mb1').on('click', function(e) {
  8. Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?',
  9. showResult);
  10. });
  11. Ext.get('mb2').on('click', function(e) {
  12. Ext.MessageBox
  13. .prompt('Name', 'Please enter your name:', showResultText);
  14. });
  15. Ext.get('mb3').on('click', function(e) {
  16. Ext.MessageBox.show({
  17. title : 'Address',
  18. msg : 'Please enter your address:',
  19. width : 300,
  20. buttons : Ext.MessageBox.OKCANCEL,
  21. multiline : true,
  22. fn : showResultText,
  23. animEl : 'mb3'
  24. });
  25. });
  26. Ext.get('mb4').on('click', function(e) {
  27. Ext.MessageBox.show({
  28. title : 'Save Changes?',
  29. msg : 'You are closing a tab that has unsaved changes. <br />Would you like to save your changes?',
  30. buttons : Ext.MessageBox.YESNOCANCEL,
  31. fn : showResult,
  32. animEl : 'mb4',
  33. icon : Ext.MessageBox.QUESTION
  34. });
  35. });
  36. Ext.get('mb6').on('click', function() {
  37. Ext.MessageBox.show({
  38. title : 'Please wait',
  39. msg : 'Loading items...',
  40. progressText : 'Initializing...',
  41. width : 300,
  42. progress : true,
  43. closable : false,
  44. animEl : 'mb6'
  45. });
  46. // this hideous block creates the bogus progress
  47. var f = function(v) {
  48. return function() {
  49. if (v == 12) {
  50. Ext.MessageBox.hide();
  51. Ext.example.msg('Done', 'Your fake items were loaded!');
  52. } else {
  53. var i = v / 11;
  54. Ext.MessageBox.updateProgress(i, Math.round(100 * i)
  55. + '% completed');
  56. }
  57. };
  58. };
  59. for (var i = 1; i < 13; i++) {
  60. setTimeout(f(i), i * 500);
  61. }
  62. });
  63. Ext.get('mb7').on('click', function() {
  64. Ext.MessageBox.show({
  65. msg : 'Saving your data, please wait...',
  66. progressText : 'Saving...',
  67. width : 300,
  68. wait : true,
  69. waitConfig : {
  70. interval : 200
  71. },
  72. icon : 'ext-mb-download', // custom class in
  73. // msg-box.html
  74. animEl : 'mb7'
  75. });
  76. setTimeout(function() {
  77. // This simulates a long-running operation like a
  78. // database save or XHR call.
  79. // In real code, this would be in a callback
  80. // function.
  81. Ext.MessageBox.hide();
  82. Ext.example
  83. .msg('Done', 'Your fake data was saved!');
  84. }, 8000);
  85. });
  86. Ext.get('mb8').on('click', function() {
  87. Ext.MessageBox.alert('Status', 'Changes saved successfully.',
  88. showResult);
  89. });
  90. // Add these values dynamically so they aren't hard-coded in the html
  91. Ext.fly('info').dom.value = Ext.MessageBox.INFO;
  92. Ext.fly('question').dom.value = Ext.MessageBox.QUESTION;
  93. Ext.fly('warning').dom.value = Ext.MessageBox.WARNING;
  94. Ext.fly('error').dom.value = Ext.MessageBox.ERROR;
  95. Ext.get('mb9').on('click', function() {
  96. Ext.MessageBox.show({
  97. title : 'Icon Support',
  98. msg : 'Here is a message with an icon!',
  99. buttons : Ext.MessageBox.OK,
  100. animEl : 'mb9',
  101. fn : showResult,
  102. icon : Ext.get('icons').dom.value
  103. });
  104. });
  105. function showResult(btn) {
  106. Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
  107. };
  108. function showResultText(btn, text) {
  109. Ext.example.msg('Button Click',
  110. 'You clicked the {0} button and entered the text "{1}".', btn,
  111. text);
  112. };
  113. });