ExtJs4 笔记(6) Ext.MessageBox 消息对话框
来源:互联网 发布:幸运叶子 知乎 编辑:程序博客网 时间:2024/06/05 12:05
本篇演示消息对话框的用法,ExtJs封装了可能用到的各类消息框,并支持自定义的配置。
如下是用到的html:
[html]<h1>各种消息框</h1><div id="div1" class="content"><button id="bt1" type="button" >Confirm</button><button id="bt2" type="button" >Prompt</button><button id="bt3" type="button" >DIY窗口</button><button id="bt4" type="button" >进度条</button><button id="bt5" type="button" >进度条2</button><button id="bt6" type="button" >wait</button></div>
一、警告对话框和确认对话框
展示一个带“是”,“否”按钮的确认对话框。当单击按钮时,执行回调函数,获取按钮类型,并弹出一个警告对话框。
[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, //表示文本框为多行文本框 "初始文本"); });
效果展示:
三、自定义DIY对话框
展示一个自定义的对话框,可以定义图标样式,按钮组的类型,是否带文本框,是否带进度条等信息。
[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 () { Ext.MessageBox.show({ title: '加载窗口', msg: '详细信息内容', progressText: '加载中...', width: 300, progress: true, closable: false, animateTarget: 'bt4' }); //模拟加载环境 var f = function (v) { return function () { if (v == 12) { Ext.MessageBox.hide(); Ext.Msg.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 * 200); } });
效果展示:
五、等待进度条对话框
展示等待进度条的对话框,提示用户当前正在等待某一任务执行。
[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); });
效果展示:
0 0
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- (8) Extjs4.2 等待对话框Ext.MessageBox.wait 自定义对话框Ext.MessageBox.show
- Ext.MessageBox消息框
- Ext.MessageBox消息框
- C#.消息对话框MessageBox
- C# MessageBox 消息对话框
- 消息对话框(MessageBox)
- C# MessageBox 消息对话框
- 学习Extjs4 (1) 提示框 Ext.MessageBox
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(5) Ext.Button 按钮
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(4) Ext.XTemplate 模板
- ExtJs4 笔记(5) Ext.Button 按钮
- 数组
- ExtJs4 笔记(5) Ext.Button 按钮
- 让win xp 有密码的网络访问
- 数据库操作
- Servlet中转发和重定向的路径问题以及表单提交路径问题
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- 37游戏叫板外国进口 用设计抢滩市场才是硬道理
- xcode 错误 调试
- Android的Handler总结
- Cocos2d-x项目从VS移植到Xcode中的配置
- ExtJs4 笔记(7) Ext.tip.ToolTip 提示
- 苹果推送通知办事教程 Apple Push&nb
- 类的继承
- 遍历整个轮廓