初识Extjs之MessageBox

1.Ext.MessageBox
Ext.MessageBox实现了常见的提示框功能。Ext.Msg是和他完全相同的对象，只是名字不一样而已。Ext.Msg有常见的alert,confirm,promt,show等方法，都很简单。

下面通过例子来说明。Extjs的函数参数可以用通常的逗号列表分隔,也可以传入一个具有参数名：参数值的对象。下面的例子也会有体现。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JsHelloWorld.aspx.cs" Inherits="PageTestJs_JsHelloWorld" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>HelloWorld</title>
    <link href="../ExtResource/css/ext-all.css" rel="stylesheet" type="text/css" />

    <script src="../Javascrip/ext-base.js" type="text/javascript"></script>

    <script src="../Javascrip/ext-all.js" type="text/javascript"></script>

    <%--<script src="../Javascrip/window/hello.js" type="text/javascript"></script>--%>

    <script type="text/javascript">        	     
               
        function alertClick() { 
            Ext.Msg.alert("alert", "Hello"); 
        } 

        function showOutput(s) { 
            var area = document.getElementById("Output"); 
            area.innerHTML = s; 
        } 

        function confirmClick() { 
            Ext.Msg.confirm('Confirm','Choose one please',showOutput); 
        } 

        function promptClick() { 
            Ext.Msg.prompt('Prompt', 'Try enter something', 
            function(id, msg) { 
                showOutput('You pressed ' + id + ' key and entered ' + msg); 
            }); 
        } 

        function showClick() { 
            var option = { 
                title:'Box Show', 
                msg: 'This is a most flexible messagebox with an info icon.', 
                modal: true, 
                buttons: Ext.Msg.YESNOCANCEL, 
                icon: Ext.Msg.INFO, 
                fn:showOutput 
            }; 
        Ext.Msg.show(option); 
        showOutput("Hi, a box is promting,right?"); 
        } 


    </script>

 
</head>
<body>
    <form id="form1" runat="server">
   
    <div id='Output'>
    </div>
    <p>
        <button id='Button1' onclick='alertClick()'>
            AlertButton</button></p>
    <p>
        <button id='Button2' onclick='confirmClick()'>
            ConfirmButton</button></p>
    <p>
        <button id='Button3' onclick='promptClick()'>
            PromptButton</button></p>
    <p>
        <button id='Button4' onclick='showClick()'>
            ShowButton</button></p>
    </form>
</body>
</html>

Msg的各个方法的参数是类似的，主要是设置标题和提示语，以及对按钮的设置。要注意Msg的消息框和javascript默认的提示框不一样，它的弹出并不会阻止其余的代码的执行。要在弹出框被关闭之后执行某些代码必须向它传入一个函数，fn。最后一个例子很清晰的显示了这一点，弹出提示框后，下面的代码仍然被执行，弹出框关闭后执行showOutput函数.效果如下：

posted @ 2010-08-02 15:47 华仔崽阅读(413) 评论(2) 收藏举报

刷新页面返回顶部

初识Extjs之MessageBox

公告