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 ...

随机推荐

modprobe
1.1 简介 Linux命令:modprobe .功能说明:自动处理可载入模块.语法:modprobe [-acdlrtvV][--help][模块文件][符号名称 = 符号值].补充说明:modp ...
深度揭秘阿里移动端高性能动态化方案Weex
2016年Qcon大会首日,阿里巴巴资深总监.淘宝移动平台.阿里百川负责人庄卓然宣布移动端高性能动态化方案Weex即时内测,并将于6月开源.此消息一出,群情汹涌,在座的程序猿.攻城狮们纷纷拿起手机扫码 ...
HDRtools-OpenExr
转:http://blog.csdn.net/lqhbupt/article/details/7917764 OpenEXR是由工业光魔(Industrial Light& Magic)开发的 ...
mongo备份&恢复
1.备份数据: $mongodump -h 127.0.0.1 -u traderaccount -p kasumi -d traderaccount -o "/traderaccount& ...
scrapy 学习笔记1
最近一段时间开始研究爬虫,后续陆续更新学习笔记爬虫,说白了就是获取一个网页的html页面,然后从里面获取你想要的东西,复杂一点的还有: 反爬技术(人家网页不让你爬,爬虫对服务器负载很大) 爬虫框架( ...
loadrunner 学习笔记--AJAX
用loadrunner测试WEB程序的时候总是会碰到AJAX或者ActiveX实现的功能,而通常这些功能会包含很多客户端函数(一般为JavaScript).我们该如何处理?如果从功能实现的角度去考虑这 ...
git使用点滴：如何查看commit的内容
在push之前有时候会不放心是不是忘记加某些文件,或者是不是多删了个什么东西,这时候希望能够看看上次commit都做了些什么. 一开始想到的是用Git diff,但是git diff用于当前修改尚未c ...
thinkphp5.0模块设计
5.0版本对模块的功能做了灵活设计,默认采用多模块的架构,并且支持单一模块设计,所有模块的命名空间均以app作为根命名空间(可配置更改). 目录结构标准的应用和模块目录结构如下: ├─applica ...
Bakery CodeForces - 707B （最短路的思路题）
Masha wants to open her own bakery and bake muffins in one of the n cities numbered from 1 to n. The ...
【BZOJ 1398】 1398: Vijos1382寻找主人 Necklace （最小表示法）
1398: Vijos1382寻找主人 Necklace Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 308 Solved: 129 Descrip ...

Ext各种对话框

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

随机推荐

热门专题