ExtJs4 笔记(6) Ext.MessageBox 消息对话框
来源:互联网 发布:绿巨人 知乎 编辑:程序博客网 时间:2024/05/20 23:33
本篇演示消息对话框的用法,ExtJs封装了可能用到的各类消息框,并支持自定义的配置。
如下是用到的html:
[html]1
2
3
4
5
6
7
8
9
<
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]1
2
3
4
5
Ext.get(
"bt1"
).on(
"click"
,
function
() {
Ext.MessageBox.confirm(
"标题"
,
"详细信息内容"
,
function
(btn) {
Ext.Msg.alert(
"提示"
,
"你点击了"
+ btn +
"按钮"
);
});
});
效果展示:
二、输入对话框
展示一个带文本框的对话框,可以供用户录入。单击按钮后可以获取文本框的内容。
[Js]1
2
3
4
5
6
7
8
9
10
11
Ext.get(
"bt2"
).on(
"click"
,
function
() {
Ext.MessageBox.prompt(
"标题"
,
"详细信息内容"
,
function
(btn, text) {
Ext.Msg.alert(
"提示"
,
"你点击了"
+ btn +
"按钮,获取的文本:"
+ text);
},
this
,
true
,
//表示文本框为多行文本框
"初始文本"
);
});
效果展示:
三、自定义DIY对话框
展示一个自定义的对话框,可以定义图标样式,按钮组的类型,是否带文本框,是否带进度条等信息。
[Js]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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]1
2
3
4
5
6
7
8
9
Ext.get(
'bt6'
).on(
'click'
,
function
() {
Ext.MessageBox.wait(
"详细信息内容"
,
"标题"
, {
interval: 100
//进度条加载速度
});
setTimeout(
function
() {
Ext.MessageBox.hide();
Ext.Msg.alert(
"提示"
,
"完毕!"
);
}, 35000);
});
效果展示:
作者:李盼(Lipan)
出处:[Lipan] (http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有
出处:[Lipan] (http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有
- 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 按钮
- Extjs学习 Ext.Panel
- ARM 堆栈操作
- iOS 数据存储
- Codeforces 225D Snake 位运算hash + bfs
- msmtp+mutt自动发邮件
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- jquery学习累积
- C++标准转换运算符const_cast
- eclipse/myeclipse自动生成注释 模板的修改
- extjs4.0模型 model store proxy使用详解
- 有关zxing 扫描源码 程序用于商业会不会收费
- Java程序员的发展前景
- iphone ios 微信在xcode4.5 ios 6中编译问题
- STK解析---菜单点击处理流程