JavaScript DHTML/Ext JS/MessageBox

Материал из Web эксперт
Перейти к: навигация, поиск

Alert Dialog MessageBox

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/form/states.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {

 Ext.MessageBox.alert("Hello", "The DOM is ready!");

}); </script>

asdf

</body> </html>


 </source>
   
  


Alert message dialog

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>

<body> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   Ext.get("mb1").on("click", function(e){
       Ext.MessageBox.alert("Status", "Changes saved successfully.", showResult);
   });
   //Add these values dynamically so they aren"t hard-coded in the html
   Ext.fly("info").dom.value = Ext.MessageBox.INFO;
   Ext.fly("question").dom.value = Ext.MessageBox.QUESTION;
   Ext.fly("warning").dom.value = Ext.MessageBox.WARNING;
   Ext.fly("error").dom.value = Ext.MessageBox.ERROR;
   function showResult(btn){
       Ext.example.msg("Button Click", "You clicked the {0} button", btn);
   };
   function showResultText(btn, text){
       Ext.example.msg("Button Click", "You clicked the {0} button and entered the text "{1}".", btn, text);
   };

}); </script> <button id="mb1">Show</button> </body> </html>


 </source>
   
  


Define handler function for confirm message dialog

   <source lang="html4strict">
  

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>

<body> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   Ext.get("mb1").on("click", function(e){
       Ext.MessageBox.confirm("Confirm", "Are you sure you want to do that?", showResult);
   });
   //Add these values dynamically so they aren"t hard-coded in the html
   Ext.fly("info").dom.value = Ext.MessageBox.INFO;
   Ext.fly("question").dom.value = Ext.MessageBox.QUESTION;
   Ext.fly("warning").dom.value = Ext.MessageBox.WARNING;
   Ext.fly("error").dom.value = Ext.MessageBox.ERROR;
   function showResult(btn){
       Ext.example.msg("Button Click", "You clicked the {0} button", btn);
   };
   function showResultText(btn, text){
       Ext.example.msg("Button Click", "You clicked the {0} button and entered the text "{1}".", btn, text);
   };

}); </script>

Confirm
Standard Yes/No dialog. <button id="mb1">Show</button>

</body> </html>


 </source>
   
  


Display confirm message dialog box

   <source lang="html4strict">
  

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>

<body> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   Ext.get("mb1").on("click", function(e){
       Ext.MessageBox.confirm("Confirm", "Are you sure you want to do that?", showResult);
   });
   //Add these values dynamically so they aren"t hard-coded in the html
   Ext.fly("info").dom.value = Ext.MessageBox.INFO;
   Ext.fly("question").dom.value = Ext.MessageBox.QUESTION;
   Ext.fly("warning").dom.value = Ext.MessageBox.WARNING;
   Ext.fly("error").dom.value = Ext.MessageBox.ERROR;
   function showResult(btn){
       Ext.example.msg("Button Click", "You clicked the {0} button", btn);
   };
   function showResultText(btn, text){
       Ext.example.msg("Button Click", "You clicked the {0} button and entered the text "{1}".", btn, text);
   };

}); </script>

Confirm
Standard Yes/No dialog. <button id="mb1">Show</button>

</body> </html>


 </source>
   
  


Ext.MessageBox.alert

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {

   Ext.MessageBox.alert("title", "msg");

}); </script>

asdf

</body> </html>


 </source>
   
  


Ext.MessageBox.wait

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {


   Ext.MessageBox.wait("something...", "Hold on..."); 

}); </script>

asdf

</body> </html>


 </source>
   
  


Ext.MessageBox.YESNOCANCEL

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>

<body> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   Ext.get("mb1").on("click", function(e){
       Ext.MessageBox.show({
          title:"Save Changes?",
          msg: "You are closing a tab that has unsaved changes. 
Would you like to save your changes?", buttons: Ext.MessageBox.YESNOCANCEL, fn: showResult, animEl: "mb4", icon: Ext.MessageBox.QUESTION }); }); //Add these values dynamically so they aren"t hard-coded in the html Ext.fly("info").dom.value = Ext.MessageBox.INFO; Ext.fly("question").dom.value = Ext.MessageBox.QUESTION; Ext.fly("warning").dom.value = Ext.MessageBox.WARNING; Ext.fly("error").dom.value = Ext.MessageBox.ERROR;
   function showResult(btn){
       Ext.example.msg("Button Click", "You clicked the {0} button", btn);
   };
   function showResultText(btn, text){
       Ext.example.msg("Button Click", "You clicked the {0} button and entered the text "{1}".", btn, text);
   };

}); </script> <button id="mb1">Show</button> </body> </html>


 </source>
   
  


Ext.Msg.alert

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript">

Ext.onReady(function(){

   Ext.Msg.alert("Hey!", "Something happened.");

}); </script> <body>

</body> </html>


 </source>
   
  


Ext.Msg.alert("asdf");

   <source lang="html4strict">
  

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {

   var radioGroup = {
       xtype: "fieldset",
       title: "Groups",
       autoHeight: true,
       items: [{
           xtype: "textfield",
           name: "txt-test4",
           fieldLabel: "Label",
           anchor: "95%"
       }]
   };
   var fp = new Ext.FormPanel({
       title: "Title",
       frame: true,
       labelWidth: 110,
       width: 600,
       renderTo:Ext.getBody(),
       bodyStyle: "padding:0 10px 0;",
       items: [
          radioGroup
       ],
       buttons: [{
           text: "Save",
           handler: function(){
              if(fp.getForm().isValid()){
                   Ext.Msg.alert("asdf");
               }
           }
       },{
           text: "Reset",
           handler: function(){
               fp.getForm().reset();
           }
       }]
   });

}); </script>

asdf

</body> </html>


 </source>
   
  


Ext.Msg.confirm

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript">

Ext.onReady(function(){

   Ext.Msg.confirm("Hey!", "Is this ok?", function(btn, text){
     if (btn == "Yes"){
       alert("go ahead");
     } else {
       alert("abort");
     }
   });

}); </script> <body>

</body> </html>


 </source>
   
  


Prompt dialog with multiline

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript">

Ext.onReady(function(){

   Ext.Msg.prompt("Hey!", "Tell me something", function(btn, text){
     if (btn == "ok"){
       var data = text;
     }
   }, this, true, "hi");

}); </script> <body>

</body> </html>


 </source>
   
  


Prompt message dialog

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>

<body> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   Ext.get("mb1").on("click", function(e){
       Ext.MessageBox.prompt("Name", "Please enter your name:", showResultText);
   });
   //Add these values dynamically so they aren"t hard-coded in the html
   Ext.fly("info").dom.value = Ext.MessageBox.INFO;
   Ext.fly("question").dom.value = Ext.MessageBox.QUESTION;
   Ext.fly("warning").dom.value = Ext.MessageBox.WARNING;
   Ext.fly("error").dom.value = Ext.MessageBox.ERROR;
   function showResult(btn){
       Ext.example.msg("Button Click", "You clicked the {0} button", btn);
   };
   function showResultText(btn, text){
       Ext.example.msg("Button Click", "You clicked the {0} button and entered the text "{1}".", btn, text);
   };

}); </script> <button id="mb1">Show</button> </body> </html>


 </source>
   
  


Set icon and button for Ext.Msg

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript">

Ext.onReady(function(){

   Ext.Msg.show({
     title:"Hey!",
     msg: "Icons and Buttons! AWESOME.",
     icon: Ext.MessageBox.INFO,
     buttons: Ext.MessageBox.OK
   });

}); </script> <body>

</body> </html>


 </source>
   
  


Set ICON to Ext.MessageBox.QUESTION

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>

<body> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   Ext.get("mb1").on("click", function(e){
       Ext.MessageBox.show({
          title:"Save Changes?",
          msg: "You are closing a tab that has unsaved changes. 
Would you like to save your changes?", buttons: Ext.MessageBox.YESNOCANCEL, fn: showResult, animEl: "mb4", icon: Ext.MessageBox.QUESTION }); }); //Add these values dynamically so they aren"t hard-coded in the html Ext.fly("info").dom.value = Ext.MessageBox.INFO; Ext.fly("question").dom.value = Ext.MessageBox.QUESTION; Ext.fly("warning").dom.value = Ext.MessageBox.WARNING; Ext.fly("error").dom.value = Ext.MessageBox.ERROR;
   function showResult(btn){
       Ext.example.msg("Button Click", "You clicked the {0} button", btn);
   };
   function showResultText(btn, text){
       Ext.example.msg("Button Click", "You clicked the {0} button and entered the text "{1}".", btn, text);
   };

}); </script> <button id="mb1">Show</button> </body> </html>


 </source>
   
  


Set message dialog button options

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {


   var myCallback = function(btn, text) {
       alert("You pressed "  + btn);
       if (text) {
           alert("You entered : " + text)
       }
   }


   Ext.Msg.show({
      title      : "Hold on there cowboy!",
      msg        : "Are you sure you want to reboot the internet?",
      width      : 300,
      buttons    : Ext.MessageBox.YESNOCANCEL,
      fn         : myCallback,
      icon       : Ext.MessageBox.ERROR
   })

}); </script>

asdf

</body> </html>


 </source>
   
  


Set message dialog icon

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {


   var myCallback = function(btn, text) {
       alert("You pressed "  + btn);
       if (text) {
           alert("You entered : " + text)
       }
   }


   Ext.Msg.show({
      title      : "Hold on there cowboy!",
      msg        : "Are you sure you want to reboot the internet?",
      width      : 300,
      buttons    : Ext.MessageBox.YESNOCANCEL,
      fn         : myCallback,
      icon       : Ext.MessageBox.ERROR
   })

}); </script>

asdf

</body> </html>


 </source>
   
  


Set title, message, width, button, handler function for MessageBox

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>

<body> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   Ext.get("mb1").on("click", function(e){
       Ext.MessageBox.show({
          title: "Address",
          msg: "Please enter your address:",
          width:300,
          buttons: Ext.MessageBox.OKCANCEL,
          multiline: true,
          fn: showResultText,
          animEl: "mb3"
      });
   });
   //Add these values dynamically so they aren"t hard-coded in the html
   Ext.fly("info").dom.value = Ext.MessageBox.INFO;
   Ext.fly("question").dom.value = Ext.MessageBox.QUESTION;
   Ext.fly("warning").dom.value = Ext.MessageBox.WARNING;
   Ext.fly("error").dom.value = Ext.MessageBox.ERROR;
   function showResult(btn){
       Ext.example.msg("Button Click", "You clicked the {0} button", btn);
   };
   function showResultText(btn, text){
       Ext.example.msg("Button Click", "You clicked the {0} button and entered the text "{1}".", btn, text);
   };

}); </script> <button id="mb1">Show</button> </body> </html>


 </source>
   
  


Set Width, title and msg for message dialog

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {


   var myCallback = function(btn, text) {
       alert("You pressed "  + btn);
       if (text) {
           alert("You entered : " + text)
       }
   }


   Ext.Msg.show({
      title      : "Hold on there cowboy!",
      msg        : "Are you sure you want to reboot the internet?",
      width      : 300,
      buttons    : Ext.MessageBox.YESNOCANCEL,
      fn         : myCallback,
      icon       : Ext.MessageBox.ERROR
   })

}); </script>

asdf

</body> </html>


 </source>
   
  


Simplest message box

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript">

Ext.onReady(function(){

   Ext.Msg.show({
     msg: "AWESOME."
   });

}); </script> <body>

</body> </html>


 </source>
   
  


Single line of Ext.Msg.prompt

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript">

Ext.onReady(function(){

   Ext.Msg.prompt("Hey!", "Tell me something", function(btn, text){
     if (btn == "ok"){
       var data = text;
     }
   });

}); </script> <body>

</body> </html>


 </source>