Wait Message Box in ExtJs

Wait Message Box in ExtJs

  1. When user is forced to wait for something then “wait” message box is used.
  2. Wait Message Box does not requires to include any additional Files.

Complete Code : Live Example

<html>
  <head>
        <title>First ExtJs Example</title>
        <linkrel="stylesheet"type="text/css"
              href="lib/extjs/resources/css/ext-all.css"/>
        <script src="lib/extjs/adapter/ext/ext-base.js"></script>
        <script src="lib/extjs/ext-all-debug.js"></script>
        <script>
            Ext.onReady(function(){
                Ext.MessageBox.wait("Loading...", 'Please Wait'); 
            });
         </script>
  </head>
  <body>
       <!-- Nothing in the body -->
  </body>
</html>

Output :

Explanation : Wait Message Box

  1. We can use wait message box in Long-running operation like a database save or XHR call.
  2. In real code, this would be in a callback function.

One Step Ahead : More Advance Example

<html>
  <head>
    <title>Wait Messagebox Example</title>
    <linkrel="stylesheet"type="text/css"
          href="lib/extjs/resources/css/ext-all.css"/>
    <script src="lib/extjs/adapter/ext/ext-base.js"></script>
    <script src="lib/extjs/ext-all-debug.js"></script>
    <script>
    Ext.onReady(function(){
        Ext.get('waitButton').on('click', function(){
            Ext.MessageBox.show({
               msg: 'Saving your data, please wait...',
               progressText: 'Saving...',
               width:300,
               wait:true,
               waitConfig: {interval:200},
               animateTarget: 'waitButton'
            });
            setTimeout(function(){
                Ext.MessageBox.hide();
                Ext.example.msg('Done', 'data saved!');
                }, 8000);
        });
    });
   </script>
  </head>
  <body>
    <b>Wait Dialog</b><br/>
    Dialog will be closed in 8 Seconds
    <buttonid="waitButton">Show</button>
  </body>
</html>

Output :