投稿
  1. 云图网首页
  2. 业界资讯

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属性中引入类样式名；

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/industrynews/13256.html

赞 (0)
0 0
上一篇 2021年7月19日 15:37
下一篇 2021年7月19日 15:37

相关推荐

发表回复

登录后才能评论