最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ExtJs4 Ext.MessageBox 各种对话框实现代码
时间:2011-12-14 编辑:简简单单 来源:一聚教程网
代码如下 | 复制代码 |
各种消息框 |
警告对话框和确认对话框
展示一个带“是”,“否”按钮的确认对话框。当单击按钮时,执行回调函数,获取按钮类型,并弹出一个警告对话框。
[Js]
代码如下 | 复制代码 |
Ext.get("bt1").on("click", function () { Ext.MessageBox.confirm("标题", "详细信息内容", function (btn) { Ext.Msg.alert("提示", "你点击了" + btn + "按钮"); }); }); |
输入对话框
展示一个带文本框的对话框,可以供用户录入。单击按钮后可以获取文本框的内容。
[Js]
代码如下 | 复制代码 |
Ext.get("bt2").on("click", function () { Ext.MessageBox.prompt( "标题", "详细信息内容", function (btn, text) { Ext.Msg.alert("提示", "你点击了" + btn + "按钮,获取的文本:" + text); }, this, true, //表示文本框为多行文本框 "初始文本"); }); |
展示一个自定义的对话框,可以定义图标样式,按钮组的类型,是否带文本框,是否带进度条等信息。
[Js]
代码如下 | 复制代码 |
Ext.get("bt3").on("click", function () { Ext.MessageBox.show({ title: "标题", msg: "详细信息内容", buttons: Ext.MessageBox.YESNOCANCEL, //对话框的按钮组合 multiline: false, //有文本框时,是否为多行文本框 closable: false, //是否可关闭 prompt: true, icon: Ext.MessageBox.WARNING, iconCls: "add16", width: 400, proxyDrag: true, value: "初始文本", progress: true, progressText: "加载中..", animateTarget: "bt3" }); }); |
效果展示:
四、加载进度条对话框
展示一个带加载进度条的对话框,提示当前执行任务的进度信息。
[Js]
代码如下 | 复制代码 |
Ext.get('bt4').on('click', function () { //模拟加载环境 |
效果展示:
等待进度条对话框
展示等待进度条的对话框,提示用户当前正在等待某一任务执行。
[Js]
代码如下 | 复制代码 |
Ext.get('bt5').on('click', function () { Ext.MessageBox.show({ msg: '正在保存数据..', progressText: '保存中...', width: 300, wait: true, waitConfig: { interval: 200 }, icon: 'download', animateTarget: 'bt5' }); setTimeout(function () { Ext.MessageBox.hide(); Ext.Msg.alert("提示", "保存完毕!"); }, 3000); }); |
效果展示:
、基本的等待对话框
这里演示基本的等待对话框的实现方式。
[Js]
代码如下 | 复制代码 |
Ext.get('bt6').on('click', function () { Ext.MessageBox.wait("详细信息内容", "标题", { interval: 100 //进度条加载速度 }); setTimeout(function () { Ext.MessageBox.hide(); Ext.Msg.alert("提示", "完毕!"); }, 35000); }); |
效果展示:
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28