Ext各种对话框

<HTML> 
<HEAD> 
<TITLE>选择确认对话框</TITLE> 
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> 
<script type="text/javascript" src="Ext/ext-base.js"></script> 
<script type="text/javascript" src="Ext/ext-all.js"></script> 
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> 
</HEAD> 
<script type="text/javascript"> 
    function start(){ 
        //选择确认对话框和传统的JS一样使用的是Confirm函数,但是在Ext中这些对话框被统一归结到Message下面:“Ext.MessageBox.confirm("对话框的标题","对话框消息正文");”,如果为其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的退出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中。使用方法是在confirm的参数第三个位置加上回调函数名,然后下面完成这个回调函数,定义一个参数接收用户的选择结果,然后可以根据选择来作出判断。
        Ext.MessageBox.confirm("选择框", "你到底是选yes还是no?", callback); 
        function callback(id) { 
            if (id == "yes") { 
                Ext.MessageBox.alert("提示","你点了确定"); 
            } else { 
                Ext.MessageBox.alert("提示", "你点了取消?"); 
            } 
        } 
    } 
    Ext.onReady(start); 
</script> 
<BODY> 
</BODY> 
</HTML>
<HTML> 
<HEAD> 
<TITLE>带输入的确认对话框</TITLE> 
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> 
<script type="text/javascript" src="Ext/ext-base.js"></script> 
<script type="text/javascript" src="Ext/ext-all.js"></script> 
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> 
</HEAD> 
<script type="text/javascript"> 
    function msg() { 
        //带输入的确认对话框,用的是prompt,和上个效果一样,也需要定义回调函数用来接收用户操作的结果,同时还有用户输入的内容。
        Ext.MessageBox.prompt("提示", "随便写点什么吧!", callback); 
        function callback(id, text) { 
            if (id == "ok") { 
                Ext.MessageBox.alert("提示","你输入的是:" + text); 
            } else { 
                Ext.MessageBox.alert("提示","你已经取消了输入!"); 
            } 
        } 
    } 
    Ext.onReady(msg); 
</script> 
<BODY> 
</BODY> 
</HTML>
<HTML> 
<HEAD> 
<TITLE>带多行文本输入框的对话框</TITLE> 
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> 
<script type="text/javascript" src="Ext/ext-base.js"></script> 
<script type="text/javascript" src="Ext/ext-all.js"></script> 
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> 
</HEAD> 
<script type="text/javascript"> 
    function msg() { 
        //带多行文本输入框的对话框,这个例子实现思路需要变化一下,使用自定义对话框,原因是原生JS中本来就没有多行文本框这一说。而且接收返回值的思路需要变化。
        Ext.MessageBox.show({ 
            title: '标题', msg: '要显示的内容', 
            width: 300, buttons: Ext.MessageBox.OKCANCEL,
            // icon:Ext.MessageBox.INFO,//显示图标
            icon: "ic",
            multiline: true, 
            fn: callback//这个是Ext专属属性,用来指示处理函数名 
            }); 
            function callback(id, text) { 
            Ext.MessageBox.alert(text); 
        } 
    } 
    Ext.onReady(msg); 
</script>
<BODY> 
</BODY> 
</HTML>
<HTML> 
<HEAD> 
<TITLE>多个按钮选择的对话框</TITLE> 
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> 
<script type="text/javascript" src="Ext/ext-base.js"></script> 
<script type="text/javascript" src="Ext/ext-all.js"></script> 
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> 
</HEAD> 
<script type="text/javascript"> 
    function msg() { 
        //显示多个按钮供客户选择,用于多条件处理的情况。 
        Ext.MessageBox.show({ 
            title: '标题', msg: '要显示的内容', 
            buttons: { yes: true, no: true, cancel: true }, 
            // buttons: { yes: "是啊", no: "不啊", cancel: "取消了啊" }, 
            fn: callback//这个是Ext专属属性,用来指示处理函数名 
        }); 
        function callback(id) { 
            Ext.MessageBox.alert("提示","你选择的是"+id); 
        } 
    } 
    Ext.onReady(msg); 
</script>
<BODY> 
</BODY> 
</HTML>
<HTML> 
<HEAD> 
<TITLE>进度条对话框</TITLE> 
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> 
<script type="text/javascript" src="Ext/ext-base.js"></script> 
<script type="text/javascript" src="Ext/ext-all.js"></script> 
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> 
</HEAD> 
<script type="text/javascript"> 
    function msg() { 
        //关于进度条,有两种实现思路,一是按大小确定,一是按时间确定。本例完成按大小控制进度条
        Ext.MessageBox.show({ 
            title: '请稍等', 
            msg: '加载中...', 
            width: 300, 
            progress: true, 
            closable: false 
            }); 
        var f = function (v) { 
            return function () { 
                if (v == 12) { 
                    Ext.MessageBox.hide(); 
                    Ext.MessageBox.alert('完成', '加载完毕!'); 
                } else { 
                    var i = v / 11; 
                    Ext.MessageBox.updateProgress(i, Math.round(100 * i) + '% 已经完成!'); 
                } 
            }; 
        }; 
        for (var i = 1; i < 13; i++) { 
            setTimeout(f(i), i * 500); 
        } 
    } 
    Ext.onReady(msg); 
</script>
<BODY> 
</BODY> 
</HTML>

 

<HTML> 
<HEAD> 
<TITLE>选择确认对话框</TITLE> 
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> 
<script type="text/javascript" src="Ext/ext-base.js"></script> 
<script type="text/javascript" src="Ext/ext-all.js"></script> 
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> 
<script type="text/javascript"> 
    function extAlert(){
        //Ext.MessageBox.alert("title","msg");
        Ext.Msg.alert("title","msg");
    }
    function extConfirm(){
        //传统方式
        /*
        var ret;
        ret =    confirm('是否继续?');
        if(ret){
            alert("继续");
        }else{
            alert("不继续");
        }
        */
        //Ext.MessageBox.confirm("选择框", "你到底是选yes还是no?", callback); 
        Ext.Msg.confirm("友情提示", "数据删除后不能恢复,是否真要删除?",getResult);
        
    }

    function getResult(btn){
        console.dir(arguments);
        if (btn == "yes") { 
            Ext.MessageBox.alert("提示","你点了确定"); 
        } else { 
            Ext.MessageBox.alert("提示", "你点了取消?"); 
        } 
    }

    var v = "this is window";
    var b1 = { v : "this is b1"};
    function showResult(btn,text){
        if (btn == "ok") { 
            Ext.MessageBox.alert("提示","你输入的是:" + text +"<br>" + this.v); 
        } else { 
            Ext.MessageBox.alert("提示","你已经取消了输入!"); 
        } 
    }
    function extPrompt(){
        //传统的
        /*
        var ret = prompt("请输入XXX:");
        alert(ret);
        */
        //Ext.MessageBox.prompt("提示", "随便写点什么吧!", callback); 
        //Ext.Msg.prompt("提示", "随便写点什么吧!", showResult); 
        Ext.Msg.prompt("提示", "随便写点什么吧!", showResult,b1,50,"defalt text"); 

    }

    function extWait(){
        var ret = Ext.Msg.wait("正在进行处理,请稍候...");
        setTimeout(function(){ret.hide();},3000);
    }

    function extProgress(){
        var ret = Ext.Msg.progress("处理进度","进度:");
        var r = 0;
        var timer = setInterval(function(){
            ret.updateProgress(r+=0.2,r*100+"%");
        
        },500);
        setTimeout(function(){
            clearInterval(timer);
        },5000);

    }
    //自定义对话框
    function extCustomDialog(){
        Ext.Msg.show({
            title:"保存数据",
            msg:"你已经做了一些操作,是否要保存当前内容的修改?",
            buttons:Ext.Msg.YESNOCANCEL,
            fn:doSave,
            icon:Ext.MessageBox.QUESTION
        
        });

    }

    function doSave(button,text){
        if(button=="yes"){
            //执行数据保存操作
        }else if(button == "no"){
            //执行不保存操作
        }else{
            //执行取消操作
        }
    }
</script> 
</HEAD> 
<BODY> 
    传统对话框<br>
    <a href="javascript:alert('123');">alert</a>
    <br>
    <a href="#" onclick="confirm('是否继续?');">confirm确认对话框</a>
    <br>
    <a href="javascript:prompt('请输入XXX:');">prompt输入对话框</a>
    <br>
    Ext对话框<br>
    <a href="javascript:extAlert()">alert</a>
    <br>
    <a href="#" onclick="extConfirm();">confirm确认对话框</a>
    <br>
    <a href="javascript:extPrompt();">prompt输入对话框</a>
    <br>
    <a href="javascript:extWait();">wait对话框</a>
    <br>
    <a href="javascript:extProgress();">进度条对话框</a>
    <br>
    <a href="javascript:extCustomDialog();">自定义对话框</a>
</BODY> 
</HTML>

 

 

自定义对话框也可以定义对话框的图标,只需要加上:“icon:Ext.MessageBox.INFO,//显示图标”,即可。同时也可以自定义图标,显示成你需要的图片,

实现思路是:

1. 先定义一个类样式,指定背景图片地址和不平铺;

2. 在icon属性中引入类样式名;

posted @ 2013-08-21 15:06 残星 阅读(...) 评论(...) 编辑 收藏