JavaScript DHTML/Ext JS/MessageBox

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

Alert Dialog MessageBox

  
<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> 
<div id="panel">asdf</div>
</body>
</html>



Alert message dialog

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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>



Define handler function for confirm message dialog

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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>
<p>
    <b>Confirm</b><br />
    Standard Yes/No dialog.
    <button id="mb1">Show</button>
</p>
</body>
</html>



Display confirm message dialog box

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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>
<p>
    <b>Confirm</b><br />
    Standard Yes/No dialog.
    <button id="mb1">Show</button>
</p>
</body>
</html>



Ext.MessageBox.alert

  
<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> 
<div id="div1">asdf</div>
</body>
</html>



Ext.MessageBox.wait

  
<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> 
<div id="div1">asdf</div>
</body>
</html>



Ext.MessageBox.YESNOCANCEL

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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. <br />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>



Ext.Msg.alert

  
<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>
    <div id="mainContent">
    </div>
</body>
</html>



Ext.Msg.alert("asdf");

   
<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> 
<div id="div1">asdf</div>
</body>
</html>



Ext.Msg.confirm

  
<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>
    <div id="mainContent">
    </div>
</body>
</html>



Prompt dialog with multiline

  
<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>
    <div id="mainContent">
    </div>
</body>
</html>



Prompt message dialog

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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>



Set icon and button for Ext.Msg

  
<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>
    <div id="mainContent">
    </div>
</body>
</html>



Set ICON to Ext.MessageBox.QUESTION

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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. <br />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>



Set message dialog button options

  
<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> 
<div id="div1">asdf</div>
</body>
</html>



Set message dialog icon

  
<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> 
<div id="div1">asdf</div>
</body>
</html>



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

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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>



Set Width, title and msg for message dialog

  
<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> 
<div id="div1">asdf</div>
</body>
</html>



Simplest message box

  

<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>
    <div id="mainContent">
    </div>
</body>
</html>



Single line of Ext.Msg.prompt

  
<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>
    <div id="mainContent">
    </div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/MessageBox&oldid=2473»