ExtJS various pop-up boxes __js

1.ExtJs message box:
Syntax: Ext.MessageBox.alert (string title, String msg,function fn, obejct scope);Parameter definition:
  Title: Msg: Prompt content fn: callback function scope that is invoked automatically after the prompt box closes: scope, specifying where this is pointing

Ext.MessageBox.alert ("Cue box", "This is a cue box");
Ext.MessageBox.alert ("Prompt Box", "This is a prompt box", function () {  
     alert ("Prompt Box close")  
});

2. ExtJs's input box
Syntax: Ext.MessageBox.prompt (string title, String msg,function fn,object scope,boolean/number multiline);
Parameter definition:
Title: Header msg: Prompt content fn: Callback functions that are invoked automatically after the prompt box is closed scope: scope, which specifies where the this point boolean/number: If True or numeric, allow multiple rows to be entered or specify a default height

Ext.MessageBox.prompt ("Input Box", "Enter first name:", function (bu,txt) {  
     Ext.MessageBox.alert ("result", "you clicked the" +bu+ "button, <br > Input is: "+txt);}"  
; 
Ext.MessageBox.prompt ("Input Box", "Enter first name:", function (bu,txt) {  
     Ext.MessageBox.alert ("result", "you clicked the" +bu+ "button, <br > Input content: "+txt";  
},this,300);

3.ExtJs Confirmation Box
Grammar:
Ext.MessageBox.confirm (string title, String msg,function fn, Object scope);
parameter definition:
Title: Msg: Prompt content fn: callback function scope that is invoked automatically after the prompt box closes: scope, specifying where this is pointing

Ext.MessageBox.confirm ("Confirm", "click the button below to make a choice", function (btn{  
        Ext.MessageBox.alert ("The button you clicked is:" +btn);  
});

4. ExtJS Custom message box
Syntax:
Ext.MessageBox.show (Object config);Config Property Description:
Title: message box title bar msg: Message content Width: Multiline of message box: whether to display multiple lines of text closable: whether to show the Close button buttons: Button icon: icons fn: callback function

var config ={  
    title: "Custom Dialog box",  
    msg: "This is a custom dialog box",  
    width:400,  
    multiline:true,  
    Closable:false,  
    Buttons:Ext.MessageBox.YESNOCANCEL,  
    Icon:Ext.MessageBox.QUESTION,  
    fn:  function (btn,txt) {  
   Ext.MessageBox.alert ("result", "you clicked the ' Yes ' button <br> the input value is:" +txt);  
Ext.MessageBox.show (config);

Note: The buttons value has been defined in the Extjs.messagebox.
Reference
OK: Only "OK" button
Cancel: Only the Cancel button
Okcancel: "OK" and "Cancel" button
Yesno: There are "yes" and "no" buttons
Yesnocancel: "Yes", "No" and "Cancel" button

Icons values are as follows
Reference
Info: Info icon
WARNING: Warning icon
Question: Inquiry icon
Error: Wrong icon

5.ExtJs Progress Bar dialog boxThe Progress Bar dialog box is also one of the custom message boxes, except that you can add progress=true when configuring config, while setting up other related information, such as progress prompts.

Ext.MessageBox.show ({  
       title: ' Please wait a moment ',  
       msg: ' Loading project ... ',  
       progresstext: ' Initializing ... ',  
       width:300,  
       progress:true,  
       closable:false  
   });  
  var f = function (V) {return  
      function () {  
        if (v = =) {  
            Ext.MessageBox.hide ();  
            Ext.MessageBox.alert (' complete ', ' All project loading complete! ');  
         } else{  
             var i = V/11;  
            Ext.MessageBox.updateProgress (I,math.round (100*i) + '% to complete ');  
  }}; for (var i=0; i<13;i++) {  
    settimeout (f (i), i*500);  
  }

Parsing the Progresstext property in the preceding code is the original text before the progress bar scrolls, and the scrolling process is defined by the UpdateProgress (number value,string Progresstext) method, which is the decimal number from 0-1. Represents a progress percentage; Progresstext indicates the text hints during the progress bar scrolling.

6.ExtJs message box animation effect

var config = {  
       title: "Fly Out of Message box",  
       msg: "This is a custom dialog box that is flying out of the Oh",  
       width:400,  
       multiline:true,  
       closable: False,  
       Buttons:Ext.MessageBox.YESNOCANCEL,  
       Icon:Ext.MessageBox.QUESTION,  
       Animel: "Fly"  
     };  
     Ext.MessageBox.show (config);