Ext.js - Yes NO Cancel Box

This is like a confirm box which asks the user for some confirmation, such as whether the user wants to do the task or decline or cancel the task. Based on the user selection different methods get called.

Syntax

Following is a simple syntax.

Ext.MessageBox.show ({
   title: 'Details',
   msg: 'Please enter your details:',
   width:300,
   buttons: Ext.MessageBox.YESNOCANCEL   
   // this button property for all three options YES, NO, Cancel.
});

Example

Following is a simple example showing the usage.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('msgBox'),
               text: 'Click Me',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.show ({
                        title: 'Details',
                        msg: 'Please enter your details:',
                        width:300,
                        buttons: Ext.MessageBox.YESNOCANCEL,
                        multiline: true,
                        fn: callbackFunction
                     });
                     function callbackFunction() {
                        Ext.Msg.alert('status', 'Details entered succesfully');
                     }
                  }
               }
            });
         });
      </script>
   </head>
   
   <body>
      <p> Click the button for alert box </p>
      <div id = "msgBox" ></div>
   </body>
</html>

The above program will produce the following result −

extjs_components.htm
Advertisements