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

随机推荐

csu 1803(余数分类)
1803: 2016 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 565 Solved: 364[Submit][Status][Web Board ...
Valid Parentheses——栈经典
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
Linux命令之dig命令挖出DNS的秘密
=== [初次见面] 我相信使用nslookup的同学一定比使用dig的同学多,所以还是有必要花些时间给大家介绍一下dig的. dig,和nslookup作用有些类似,都是DNS查询工具. dig,其 ...
WERTYU（UVa10082）
C++ 11 代码如下: #include<iostream> using namespace std; const char s[] = { "`1234567890-=QWE ...
virtualenv python的虚拟环境
官网:https://virtualenv.pypa.io/en/stable/userguide/ virtualenv通过创建独立Python开发环境的工具, 来解决依赖.版本问题基本使用: d ...
info.plist文件里面添加描述 -> 配置定位,相册等
<key>NSAppleMusicUsageDescription</key> <string>App需要您的同意,才能访问媒体资料库</string> ...
matlab下mex 调用opencv库
1. 首先写好待编译的.cpp文件,使用混合编程,以人脸检测为例 #include "mex.h" // Required for the use of MEX files // ...
vim常见操作命令
打开多文件vim file1 file2:open/:e 不关闭vim打开文件分帧窗口:new 新窗口:sp 横向:vsp 纵向ctrl+w窗口切换:tabc 关闭当前窗口:tabo 关闭所有窗口: ...
二进制拆位(贪心)【p2114】[NOI2014]起床困难综合症
Description 21世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm一直坚持与起床困难综合症作斗争.通过研究相关文献,他找到了 ...
socket的使用一
socket概念 socket层理解socket Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协 ...

Ext各种对话框

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

随机推荐

热门专题