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

Ext各种对话框的更多相关文章

Ext入门学习系列（四）面板控件
第四章使用面板上节学习了Ext复杂对话框,更进一步了解了Ext的运行机制.本章重点来了解Ext所有控件的基础——面板控件. 一.Ext的面板是什么? 同样先来看看几个效果: 基本面板,点击右上角小 ...
extjs 学习笔记（二）
EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...
03_Ext_Viewport_Window_Dialog
Viewport Viewport 代表整个浏览器窗口,直接渲染到document.body节点,取代页面中的所有内容.一般作为应用程序主界面. 随着浏览器显示区域的大小自动改变,一个页面中只能有一个 ...
[转载]ExtJs4 笔记（6） Ext.MessageBox 消息对话框
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法 ...
Ext信息提示对话框
Ext.window.MessageBox是一个工具类,他继承自Ext.window.Windoe对象,用来生成各种风格的信息提示对话框,其实例对象可以通过Ext.MessageBox或Ext.Msg ...
ExtJs4 笔记（6） Ext.MessageBox 消息对话框
本篇演示消息对话框的用法,ExtJs封装了可能用到的各类消息框,并支持自定义的配置. 如下是用到的html: [html] <h1>各种消息框</h1> <div id= ...
实用ExtJS教程100例-005：自定义对话框Ext.MessageBox.show
我们对ExtJS对话框进行了三篇演示: MessageBox的三种用法进度条对话框Ext.MessageBox.progress 等待对话框Ext.MessageBox.wait 通过上面三篇内容的 ...
实用ExtJS教程100例-004：等待对话框Ext.MessageBox.wait
在前面两节中,我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框.在本节内容中,我们来看看ExtJS中的等待对话框. 首先来看一个简单的例子[查看在线示例]: 这种对话框会一直滚动 ...
实用ExtJS教程100例-003：进度条对话框Ext.MessageBox.progress
在上一篇内容中我们介绍了三种常用的MessageBox提示框,在这篇文章中,我们将演示如何在对话框中使用进度条. 进度条对话框我们可以使用下面的代码来在MessageBox中显示一个进度条: Ext ...

随机推荐

chkconfig命令主要用来更新（启动或停止）和查询系统服务的运行级信息
chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...
包含Winsock2.h出错问题
工程中添加 Winsock2.h 报错 1>c:\program files (x86)\windows kits\8.1\include\shared\ws2def.h(100): warni ...
Python的hasattr() getattr() setattr() 函数使用方法（简介）
hasattr(object, name)判断一个对象里面是否有name属性或者name方法,返回BOOL值,有name特性返回True, 否则返回False.需要注意的是name要用括号括起来 1 ...
转：linux关闭防火墙iptables
ref:https://jingyan.baidu.com/article/066074d64f433ec3c21cb000.html Linux系统下面自带了防火墙iptables,iptables ...
2017 计蒜之道初赛第五场 C. UCloud 的安全秘钥（中等）
暴力. $O(m*n)$的算法可以通过此题,每次询问$O(m)$扫$S$数组,统计不同数字的个数,每次移动最多只会变化两个数字,如果不同数字个数为$0$,那么答案加$1$. #include < ...
POJ3292 Semi-prime H-numbers [数论，素数筛]
题目传送门 Semi-prime H-numbers Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10871 Acce ...
express中间件的理解
参考 :https://blog.csdn.net/huang100qi/article/details/80220012 Express中间件分为三种内置中间件.自定义中间件.第三方中间件可以与n ...
vue v-model 简单使用
最近在写组件时,考虑到子组件的状态需要实时反馈给父组件,于是想起来了v-model,下面介绍一下自定义组件中的简单使用官网介绍不是很清晰,这个默认的input事件很容易让人产生误解,其实个人建议还是 ...
前端获取Base64字符串格式图片Ajax到后端处理
前端获取到的Base64字符串格式图片一般都是经过处理的图片,例如:裁剪过后的,这里假设data为获取到的Base64字符串格式图片 Base64格式图片的格式为 “data:image/png;ba ...
连接LilyPad之Linux平台的驱动
连接LilyPad之Linux平台的驱动常用的Linux发行版都自带了FTDI驱动,因此在绝大多数Linux发行版中不需要用户进行额外的操作. 在LilyPad编程器被正确驱动后,就可以将LilyP ...

Ext各种对话框

Ext各种对话框的更多相关文章

随机推荐

热门专题