Ext.MessageBox Learning, including the usage of alert, confirm, prompt, wait and show

Keywords: Attribute Javascript JSP Java

1: Basic knowledge

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 functionparameter for show for more details).

Note that MessageBox is asynchronous, unlike general alert, general alert will stop browser execution, but MessageBox will not stop the code running. For this reason, if some code needs feedback after user operation is completed, then use callback function (callback function).


2: Ext.MessageBox.alert()

    alert.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'messagebox.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.       
  20.     <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>  
  21.     <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>  
  22.     <script type="text/javascript" src="ext3.2/ext-all.js"></script>  
  23.     <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>  
  24.       
  25.     <script type="text/javascript">  
  26.         Ext.onReady(function(){  
  27.             Ext.get('test').on('click', function() {  
  28.                 Ext.MessageBox.alert("System hint", "Do you want to click on me, please choose! ", function(but) {  
  29.                     Ext.MessageBox.alert("Selection prompt", "You have chosen." + but);  
  30.                 });  
  31.               });  
  32.         });  
  33.     </script>  
  34.   </head>  
  35.     
  36.   <body>  
  37.   <div id="test">Click on me to test Ext.MessageBox</div>  
  38.   </body>  
  39. </html>  

In the above code, MessageBox.alert (title, content, callback function) provides three parameters. The title is used to modify the title information of the prompt box. The content is used to display the information content of the prompt to the user. The callback function is used to accept the user's choice when the prompt box disappears. If the user clicks the "OK" button, the OK selected by the user is returned. If the user clicks the close button, cancel information is returned.

Demonstration effect:


3: Ext.MessageBox.confirm() function

 

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'messagebox.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.       
  20.     <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>  
  21.     <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>  
  22.     <script type="text/javascript" src="ext3.2/ext-all.js"></script>  
  23.     <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>  
  24.       
  25.     <script type="text/javascript">  
  26.         Ext.onReady(function(){  
  27.             Ext.get('test').on('click', function() {  
  28.                 Ext.MessageBox.confirm("System hint", "Do you want to hit me, please choose", function(but) {  
  29.                     Ext.MessageBox.alert("Selection prompt", "You have chosen." + but);  
  30.             });  
  31.          });  
  32.       });  
  33.     </script>  
  34.   </head>  
  35.     
  36.   <body>  
  37.   <div id="test">Click on me to test Ext.MessageBox.confirm</div>  
  38.   </body>  
  39. </html>  

Procedural effect:


Picture: The effect of clicking on the test div

Picture: Click Yes to see the effect.

Picture: The effect of clicking No


4: Ext.MessageBox.prompt

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'messagebox.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.       
  20.     <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>  
  21.     <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>  
  22.     <script type="text/javascript" src="ext3.2/ext-all.js"></script>  
  23.     <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>  
  24.       
  25.     <script type="text/javascript">  
  26.         Ext.onReady(function(){  
  27.             Ext.get('test').on('click', function() {  
  28.                 Ext.MessageBox.prompt("System hint", "Please enter your QQ Number and password! Hey",   
  29.                      function(but, text){  
  30.                         alert("You have chosen." + but + ":Your QQ Information is" + text);  
  31.                       });  
  32.             });  
  33.          });  
  34.     </script>  
  35.   </head>  
  36.     
  37.   <body>  
  38.   <div id="test">Click on me to test Ext.MessageBox.prompt</div>  
  39.   </body>  
  40. </html>  
Procedural effect maps:

Figure: Procedural effects

Figure: Procedural effects

5:prompt displays multiple lines

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'messagebox.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.       
  20.     <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>  
  21.     <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>  
  22.     <script type="text/javascript" src="ext3.2/ext-all.js"></script>  
  23.     <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>  
  24.       
  25.     <script type="text/javascript">  
  26.         Ext.onReady(function(){  
  27.             Ext.get('test').on('click', function() {  
  28.                 Ext.MessageBox.prompt('Tips', 'Enter some content to see: ', callBack, this, true);  
  29.                 function callBack(id, msg) {  
  30.                     alert('The button you clicked id yes' + id + '\n' + 'The input is: ' + msg);  
  31.                 }  
  32.             });  
  33.          });  
  34.     </script>  
  35.   </head>  
  36.     
  37.   <body>  
  38.   <div id="test">Click on me to test Ext.MessageBox.prompt</div>  
  39.   </body>  
  40. </html>  

Procedural effect:


6:Ext.MessageBox.wait

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'messagebox.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.       
  20.     <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>  
  21.     <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>  
  22.     <script type="text/javascript" src="ext3.2/ext-all.js"></script>  
  23.     <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>  
  24.       
  25.     <script type="text/javascript">  
  26.         Ext.onReady(function(){  
  27.             Ext.get('test').on('click', function(){  
  28.                 Ext.MessageBox.wait('Added to deleted data, please wait a moment.....', "Add to delete"); //A waiting bar appears.
  29.             });  
  30.          });  
  31.     </script>  
  32.   </head>  
  33.     
  34.   <body>  
  35.   <div id="test">Click on me to test Ext.MessageBox.prompt</div>  
  36.   </body>  
  37. </html>  

Procedural effect:

7: Ext.MessageBox.show

Its function is very powerful. It uses config configuration and has many parameters. Some commonly used parameters are listed.

animal: Animation effects when dialog boxes pop up and close, for example, when set to "id1", they pop up from Id1 and produce animation, while shrinking is the opposite.

buttons: The settings of pop-up dialog boxes are as follows: Ext.Msg.OK, Ext.Msg.OKCANCEL, Ext.Msg.CANCAL, Ext.Msg.YESNO, Ext.Msg.YESNOCANCEL,

You can also customize the text on the button: {"ok", "I was originally ok"}. If set to false, no buttons are displayed

* closable: If false, the fork in the upper right corner is not displayed, and the default value is true

* msg: Text content

* title: title

* fn: Functions executed after closing the pop-up box

* con: The icon in front of the pop-up box content takes the values Ext.MessageBox.INFO, Ext.MessageBox.ERROR, Ext.MessageBox.WARNING, Ext.Message.QUESTION
* width: The width of the pop-up box, without units

* prompt: Set to true, then pop-up box with input box

* progress: Set to true to display the progress bar

* progressText: Displays the text on the progress bar

* wait: true, dynamic display progress

* waitConfig: Configure parameters to display control progress

  

The procedure is as follows:

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'messagebox.jsp' starting page</title>  
  13.       
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.       
  20.     <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>  
  21.     <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>  
  22.     <script type="text/javascript" src="ext3.2/ext-all.js"></script>  
  23.     <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>  
  24.       
  25.     <script type="text/javascript">  
  26.         Ext.onReady(function(){  
  27.             Ext.get('test').on('click', function() {  
  28.                 Ext.MessageBox.show({  
  29.                     title: 'Title',  
  30.                     buttons: Ext.Msg.YESNO,  
  31.                     width: 200,  
  32.                     height: 400,  
  33.                     closable: false,  
  34.                     msg: 'Content displayed',  
  35.                     fn: function(e, text) {  
  36.                         Ext.MessageBox.alert('What you click on is' + e + "The input is: " + text);  
  37.                     },  
  38.                     icon: Ext.MessageBox.INFO,  
  39.                     prompt: true,  
  40.                     multiline: true  
  41.                 });  
  42. });  
  43.          });  
  44.     </script>  
  45.   </head>  
  46.     
  47.   <body>  
  48.   <div id="test">Click on me to test Ext.MessageBox.show</div>  
  49.   </body>  
  50. </html>  

Procedural effect:

Figure: Procedure Diagram

Figure: The prompt box displayed after clicking Yes


Posted by gnunoob on Thu, 13 Dec 2018 13:33:19 -0800

Hot Keywords

©2024 Programmer Group