4、Ext对话框组件的应用

来源：互联网发布：爱名网如何出售域名编辑：程序博客网时间：2024/06/05 09:05

快速编写demo

创建dialog.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><!-- 第一步引入Ext的样式文件 --><link type="text/css" rel="stylesheet"    href="ext-3.4.1/resources/css/ext-all.css"></link><!-- 引入Ext库文件，底层驱动 --><script src="ext-3.4.1/adapter/ext/ext-base.js"></script><!-- 引入ext-all --><script src="ext-3.4.1/ext-all.js"></script><script src="dialog.js"></script></head><body>    传统对话框：    <a href="javascript:alert('123')">alert</a>    <a href="del.jsp" onclick="return confirm('是否要删除？')">confirm确认对话框</a>    <a href="javaacript:prompt('请输入姓名')">prompt输出对话框</a> Ext对话框：    <a href="javascript:testAlert()">alert</a>    <a href="javascript:testConfirm()">confirm确认对话框</a>    <a href="javascript:testPrompt()">prompt输出对话框</a>    <a href="javascript:testWait()">wait对话框</a>    <a href="javascript:testProgress()">progress进度条对话框</a>    <a href="javascript:testCustomDialog()">自定义对话框</a></body></html>

创建dialog.js

function testAlert() {    Ext.MessageBox.alert("友情提示", "用户名不能为空");}// function getResult(){//  // }function testConfirm() {    var ret;    // 传统对话框结果的获取    /*     * ret=confirm("数据删除后不能再回复，是否真要删除？"); if(ret){ alert("删除"); } else{     * alert("不删除"); }     */    // 基于Ext的对话框，要去结果，必须使用回调函数    ret = Ext.Msg.confirm("友情提示", "数据删除后不能再回复，是否真要删除？", function(btn) {                if (btn == "yes") {                    alert("删除");                } else {                    alert("不删除");                }            });}var v = "this is window";var b1 = {    v : "this is b1"};function showResult(btn, txt) {    if (btn == "ok") {        Ext.Msg.alert("提示", "你输入的姓名是：" + txt + "<br/>" + this.v);    } else {        Ext.Msg.alert("提示", "取消操作");    }}function testPrompt() {    // 传统的Prompt结果获取    /*     * var ret=prompt("请输入你的姓名"); alert("结果：" + ret);     */    // 获取结果使用回调函数    Ext.Msg.prompt("数据输入", "请输入你的姓名", showResult, b1, 50, "大帅哥");    // 只会有一个对话框显示在页面上    // Ext.Msg.alert("数据输入","请输入你的姓名");}function testWait() {    var ret = Ext.Msg.wait("正在进行处理，请稍后...");    setTimeout(function() {                ret.hide();            }, 3000);}function testProgress() {    var ret = Ext.Msg.progress("处理进度", "进度：");    var r = 0;    var timer = setInterval(function() {                ret.updateProgress(r += 0.2, r + "%");            }, 500);    setTimeout(function() {                ret.hide();                clearInterval(timer);            }, 5000);}function doSave() {    if (button == "yes") {    } else if (buttons == "on") {    } else {    }}// 自定义对话框function testCustomDialog() {    Ext.Msg.show({                title : "保存数据",                msg : "你已经做了一些数据操作，是否<b><font color=red>保存</font></b>当前内容的修改",                buttons : Ext.Msg.YESNOCANCEL,                fn : doSave,                icon : Ext.MessageBox.QUESTION            });}

执行效果如下：
这里写图片描述

传统对话框
- alert
- confirm确认对话框
- prompt输出对话框
Ext对话框
- alert
- confirm确认对话框
- prompt输出对话框
- wait对话框
- progress进度条对话框
- 自定义对话框

知识点解析

alert(String title , String msg , Function fn , Object scope)

显示一个标准的带有确认按钮的只读消息框（类似于 JavaScript原生的
alert函数、prompt函数）。如果给定了回调函数，则会在用户点击按钮后执行，并且被点击的按钮的 ID
会当做唯一的参数传入到回调函数中（也有可能是右上角的关闭按钮）。
参数项：

title: String 标题文本

msg： String 消息框body文本

fn： Function （可选）消息框被关闭后调用的回调函数

scope： Object （可选）回调函数的作用域

返回值：

Ext.MessageBox this

confirm( String title , String msg , Function fn , Object scope )

显示一个带有是和否按钮的确认消息框（等同与JavaScript
原生的confirm函数）。如果给定了回调函数，则会在用户点击按钮后执行，并且被点击的按钮的ID会当做唯一的参数传入到回调函数中（也有可能是右上角的关闭按钮）。
参数项：

title：String 标题文本

msg：String 消息框body文本

fn：Function （可选）消息框被关闭后调用的回调函数

scope：Object （可选）回调函数的作用域

返回值：

Ext.MessageBox this

prompt( String title , String msg , Function fn , Object scope , Boolean/Number multiline , String value )

显示一个带有确认和取消按钮的提示框，并接受用户输入文本（等同与JavaScript原生的prompt函数）。提示框可以是一个单行或多行文本框。如果给定了回调函数，则在用户点击任意一个按钮后执行回调函数，
并且被点击的按钮的ID（有可能是右上角的关闭按钮）和用户输入的文本都将被当做参数传给回调函数。
参数项：

title：String

msg：String

fn：Function

scope:Object

multiline:Boolean/Number （可选的）值为true是则创建一个defaultTextHeight值指定行数的文本域，或者一个以像素为单位表示的高度（默认为false，表示单行）。

value：String （可选的）text输入元素的默认值（默认为”“）

返回值：

Ext.MessageBox this

wait( String msg , String title , Object config )

显示一个带有不断自动更新的进度条的消息框。这个可以被用在一个长时间运行的进程中防止用户交互。你需要在进程完成的时候关闭消息框。参数项：

msg：String 消息框body文本

title：String （可选）标题文本

config：Object （可选） Ext.ProgressBarwaitConfig对象

progress( String title , String msg , String progressText )

显示一个带有进度条的消息框。此消息框没有按钮并且无法被用户关闭。你必须通过Ext.MessageBoxupdateProgress方法更新进度条，并当进度完成时关闭消息框。
参数项：

title：String

msg：String

progressText：String 进度条显示的文本（默认为”“）

show( Object config )

这里写图片描述

0 0