Extjs 提示窗口
EXTJS----弹出窗口
Ext.MessageBox
对话框的更多配置
Ext.MessageBox中预设的4个按钮分别是OK,Yes,No,Cancel。如果不使用YESNOCANCEL这种预设变量,也可以直接使用{ok:true, yes:true, no:true,cancel:true}的形式,这样4个按钮都会显示在对话框中。
进度条
上述的进度状态时不会发生变化的,我们需要调用Ext.MessageBox.updateProgress()函数,如以下为每秒变化,10秒后隐藏:
还可以使用一种自动变化的进度条提示框,如Ext.MessageBox.wait('请等待', msg: ' 读取数据中');
动画效果
可以为对话框这是弹出和关闭的动画效果,使用animEl参数指定一个HTML元素,对话框就会依据指定的HTML元素播放弹出和关闭的动画。
窗口分组
示例中,所有通过newWind()方法产生的窗口都属于mygroup窗口组
1
//Ext.MessageBox.alert()
2
Ext.MessageBox.alert('标题','内容',function(btn){
3
alert('你刚刚点击了' + btn);
4
});
5![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
6
//Ext.MessageBox.confirm()
7
Ext.MessageBox.confirm('选择框','你到底是选择Yes还是No?', function(btn) {
8
alert('你刚刚点击了' + btn);
9
});
10![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
11
//Ext.MessageBox.prompt()
12
Ext.MessageBox.prompt('输入框','随便输入一些东西', function(btn,text) {
13
alert('你刚刚点击了' + btn + ", 刚刚输入了" + text);
14
});
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
2
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
4
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
5
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
6
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
7
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
8
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
9
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
10
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
11
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
12
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
13
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
14
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
对话框的更多配置
1
//可以输入多行的输入框
2
Ext.MessageBox.show({
3
title:'多行输入框',
4
msg:'你可以多输入好几行',
5
width:300,
6
buttons:Ext.MessageBox.OKCANCEL,
7
multiline:true,
8
fn:function(btn,text){
9
alert('你刚刚点击了' + btn + ", 刚刚输入了" + text);
10
}
11
});
12![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
13
//自定义对话框的按钮
14
Ext.MessageBox.show({
15
title:'随便按个按钮',
16
msg:'从三个按钮里随便选择一个',
17
buttons:Ext.MessageBox.YESNOCANCEL,
18
multiline:true,
19
fn:function(btn){
20
alert('你刚刚点击了' + btn);
21
}
22
});
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
2
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
4
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
5
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
6
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
7
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
8
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
9
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
10
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
11
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
12
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
13
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
14
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
15
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
16
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
17
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
18
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
19
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
20
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
21
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
22
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
Ext.MessageBox中预设的4个按钮分别是OK,Yes,No,Cancel。如果不使用YESNOCANCEL这种预设变量,也可以直接使用{ok:true, yes:true, no:true,cancel:true}的形式,这样4个按钮都会显示在对话框中。
进度条
1
Ext.MessageBox.show({
2
title:'请等待',
3
msg:'读取数据中',
4
width:240,
5
progress:true,
6
closable:false //隐藏对话框右上角的关闭按钮,从而禁止用户关闭进度条
7
});
8![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
9
//也可以直接使用Ext.MessageBox.progress()
10
Ext.MessageBox.progress('请等待',msg:'读取数据中');
11![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
3
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
4
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
5
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
6
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
7
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
8
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
9
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
10
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
11
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
上述的进度状态时不会发生变化的,我们需要调用Ext.MessageBox.updateProgress()函数,如以下为每秒变化,10秒后隐藏:
1
var f = function(v){
2
return function(){
3
if (v == 11) {
4
Ext.MessageBox.hide();
5
} esle {
6
Ext.MessageBox.updateProgress(v/10,'正在读取第' + v + '个,一共10个');
7
}
8
};
9
};
10
for (var i = 1 ; i < 12 ; i++) {
11
setTimeout(f(i) , i*1000);
12
}
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
3
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
4
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
5
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
6
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
7
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
8
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
9
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
10
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
11
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
12
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
还可以使用一种自动变化的进度条提示框,如Ext.MessageBox.wait('请等待', msg: ' 读取数据中');
动画效果
可以为对话框这是弹出和关闭的动画效果,使用animEl参数指定一个HTML元素,对话框就会依据指定的HTML元素播放弹出和关闭的动画。
窗口分组
1
<script type="text/javascript">
2
var i = 0 , mygroup;
3![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
4
function newWin(){
5
var win = new Ext.Window({
6
title:'窗口'+ i++,
7
width:400,
8
height:300,
9
maximizable:true,
10
manager:mygroup
11
});
12
win.show();
13
}
14![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
15
function toBack(){
16
mygroup.sendToBack(mygroup.getActive());
17
}
18![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
19
function hideAll(){
20
mygroup.hideAll();
21
}
22![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
23
Ext.onReady(function(){
24
mygroup = new Ext.WindowGroup();
25![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
26
Ext.get("btn").on("click",newWin);
27
Ext.get("btnToBack").on("click",toBack);
28
Ext.get("btnHide").on("click",hideAll);
29
});
30
</script>
31![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
32
<BODY>
33
<input id="btn" type="button" name="add" value="新窗口"/>
34
<input id="btnToBack" type="button" name="btnToBack" value="放到后台"/>
35
<input id="btnHide" type="button" name="btnHide" value="隐藏所有"/>
36
</BODY>
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
2
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
3
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
4
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
5
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
6
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
7
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
8
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
9
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
10
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
11
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
12
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
13
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
14
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
15
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
16
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
17
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
18
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
19
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
20
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
21
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
22
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
23
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
24
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
25
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
26
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
27
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
28
![](http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif)
29
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockEnd.gif)
30
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
31
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
32
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
33
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
34
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
35
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
36
![](http://www.blogjava.net/Images/OutliningIndicators/None.gif)
示例中,所有通过newWind()方法产生的窗口都属于mygroup窗口组