一、提示框(Ext.MessageBox.alert 或 Ext.Msg.alert)
alert( String title, String msg, [Function fn], [Object scope] ) :
title:標(biāo)題
msg:顯示內(nèi)容
fn:回調(diào)函數(shù)
scope:作用域
Js代碼
- <script type="text/javascript">
- Ext.onReady( function(){
- Ext.MessageBox.alert('Alert','彈出窗口Alert',function(){alert('abc')});
- }
- );
- </script>
- <script type="text/javascript">
- Ext.onReady( function(){
- Ext.MessageBox.alert('Alert','彈出窗口Alert',function(){alert('abc')});
- }
- );
- </script>
<script type="text/javascript">
Ext.onReady( function(){
Ext.MessageBox.alert('Alert','彈出窗口Alert',function(){alert('abc')});
}
);
</script>
二、對話框(Ext.MessageBox.confirm 或 Ext.Msg.confirm)
confirm( String title, String msg, [Function fn], [Object scope] )
title:標(biāo)題
msg:顯示內(nèi)容
fn:回調(diào)函數(shù)
Js代碼
- <script type="text/javascript">
- Ext.onReady( function(){
- Ext.MessageBox.confirm( "請確認(rèn)", "是否要?jiǎng)h除指定內(nèi)容", function(button,text){
- alert(button);
- } );
- }
- );
- </script>
- <script type="text/javascript">
- Ext.onReady( function(){
- Ext.MessageBox.confirm( "請確認(rèn)", "是否要?jiǎng)h除指定內(nèi)容", function(button,text){
- alert(button);
- } );
- }
- );
- </script>
<script type="text/javascript">
Ext.onReady( function(){
Ext.MessageBox.confirm( "請確認(rèn)", "是否要?jiǎng)h除指定內(nèi)容", function(button,text){
alert(button);
} );
}
);
</script>
三、對話框(Ext.MessageBox.prompt 或 Ext.Msg.prompt )
prompt( String title, String msg, [Function fn], [Object scope] )
title:標(biāo)題
msg:顯示內(nèi)容
fn:回調(diào)函數(shù)
Js代碼
- <script type="text/javascript">
- Ext.onReady( function(){
- Ext.MessageBox.prompt( "輸入提示框", "請輸入您的年齡", function(button,text){
- alert(button);
- alert(text);
- } );
- }
- );
- </script>
- <script type="text/javascript">
- Ext.onReady( function(){
- Ext.MessageBox.prompt( "輸入提示框", "請輸入您的年齡", function(button,text){
- alert(button);
- alert(text);
- } );
- }
- );
- </script>
<script type="text/javascript">
Ext.onReady( function(){
Ext.MessageBox.prompt( "輸入提示框", "請輸入您的年齡", function(button,text){
alert(button);
alert(text);
} );
}
);
</script>
四、對話框(Ext.MessageBox.show 或 Ext.MsgBox.show)
Js代碼
- Ext.onReady( function(){
- Ext.MessageBox.show( {
- title:"保存數(shù)據(jù)",
- msg:"你已經(jīng)作了一些數(shù)據(jù)修改，是否要保存當(dāng)前內(nèi)容的修改？",
- buttons:Ext.Msg.YESNOCANCEL,
- fn:save,
- icon:Ext.MessageBox.QUESTION});
- }
- );
- Ext.onReady( function(){
- Ext.MessageBox.show( {
- title:"保存數(shù)據(jù)",
- msg:"你已經(jīng)作了一些數(shù)據(jù)修改，是否要保存當(dāng)前內(nèi)容的修改？",
- buttons:Ext.Msg.YESNOCANCEL,
- fn:save,
- icon:Ext.MessageBox.QUESTION});
- }
- );
Ext.onReady( function(){
Ext.MessageBox.show( {
title:"保存數(shù)據(jù)",
msg:"你已經(jīng)作了一些數(shù)據(jù)修改，是否要保存當(dāng)前內(nèi)容的修改？",
buttons:Ext.Msg.YESNOCANCEL,
fn:save,
icon:Ext.MessageBox.QUESTION});
}
);
a
1.Ext.MessageBox.alert()方法
有四個(gè)參數(shù)：alert( title , msg , function(){} ，this)
其中title，msg為必選參數(shù)，function為可選參數(shù)，在關(guān)閉彈出窗口后觸發(fā),可以傳入點(diǎn)擊的按鈕的id，第四個(gè)參數(shù)scope:指回調(diào)函數(shù)作用域。
Ext.Msg.alert(”Notice”,”hello world!”); //alert會(huì)阻塞程序的執(zhí)行，而Ext版的alert是異步執(zhí)行
Ext.Msg.alert(”Notice”,”<font color=red>hello world!</font>”); //支持html格式
Ext.Msg.alert(”Notice”,”<font color=red>hello world!</font>”,function callback(id){alert(’您點(diǎn)的是’+id);});
2.Ext.MessageBox.confirm()方法
基本上同alert()方法一模一樣。 注意這點(diǎn)：
Ext.MessageBox.confirm(“title“,“msg“,function(e){alert(e);});
這個(gè)參數(shù)e是什么？它是你點(diǎn)擊的彈出框的按鈕的值，三種值：yes,no,cancel. Alert()方法也是如此，不過只有兩種值：ok，cancel.
回調(diào)函數(shù)可以傳入一唯一參數(shù)：單擊按鈕的id，點(diǎn)擊退出按鈕也會(huì)觸發(fā)此事件
3.Ext.MessageBox.prompt()方法
有五個(gè)參數(shù)，比前面alert方法多一個(gè)是否多行。
Ext.MessageBox.prompt(“title“,“msg“);
Ext.Msg.prompt(’Notice’,'請輸入你的姓名：’,function callback(id,msg){alert(’單擊的按鈕ID：’+id+’"n您輸入的姓名是：’+msg);},this,false);
//輸入”javachen”,點(diǎn)擊ok按鈕，彈出單擊的按鈕ID：OK 您輸入的姓名是：javachen
Ext.MessageBox.prompt(“title“,“msg“,function(e,text){alert(e+“-“+text);},this,true);//true為多行，this表示作用域
4.Ext.MessageBox.show()方法
功能很強(qiáng)大，采用config配置形式，比前面的方法使用更方便。 參數(shù)很多，在此列舉最常用的配置參數(shù)：
1.animEl:對話框彈出和關(guān)閉時(shí)的動(dòng)畫效果，比如設(shè)置為“id1”，則從id1處彈出并產(chǎn)生動(dòng)畫，收縮則相反
2.buttons:彈出框按鈕的設(shè)置，主要有以下幾種：Ext.Msg.OK,
Ext.Msg.OKCANCEL,
Ext.Msg.CANCEL,
Ext.Msg.YESNO,
Ext.Msg.YESNOCANCEL
你也可以自定義按鈕上面的字：{“ok“,“我本來是ok的“}。 若設(shè)為false，則不顯示任何按鈕.
3.closable:如果為false，則不顯示右上角的小叉叉，默認(rèn)為true。
4.msg:“消息的內(nèi)容“
5.title:“標(biāo)題“
6.fn:關(guān)閉彈出框后執(zhí)行的函數(shù)
7.icon：彈出框內(nèi)容前面的圖標(biāo)，取值為Ext.MessageBox.INFO，
Ext.MessageBox.ERROR,
Ext.MessageBox.WARNING,
Ext.MessageBox.QUESTION
8.width:彈出框的寬度，不帶單位
9.prompt：設(shè)為true，則彈出框帶有輸入框
10.multiline：設(shè)為true，則彈出框帶有多行輸入框
11.progress:設(shè)為true，顯示進(jìn)度條，（但是是死的）
12.progressText:顯示在進(jìn)度條上的字
13.wait：設(shè)為true，動(dòng)態(tài)顯示progress
14.waitConfig:配置參數(shù)，以控制顯示progress
例子：
Ext.Msg.show({
title:’Notice’,
msg:’請輸入您的姓名！’,
width:300,
prompt:true,
//multiline:true,
//wait:true,
//progress:true,
//progressText:’progressing’,
closable:true,
modal:true,
buttons:Ext.Msg.OKCANCEL,
icon:Ext.Msg.INFO
});
5.Ext.MessageBox.wait()
參數(shù) msg：顯示信息 title：標(biāo)題 config：配置信息
例子：
Ext.Msg.wait(’請等待，操作正在進(jìn)行中’,'Notice’);
Ext.Msg.wait(’請等待，操作正在進(jìn)行中！’,'Notice’,
{
text:’processing’,
duration:2700, //進(jìn)度條在被重置前運(yùn)行的時(shí)間
interval:300, //進(jìn)度條的時(shí)間間隔
increment:10, //進(jìn)度條的分段數(shù)量
fn:function callback(){
alert(”complete”);
}
});
6.Ext.MessageBox.hide()
把顯示著的當(dāng)前message box隱藏起來。
參數(shù): 無. Returns: Ext.MessageBox
7.Ext.MessageBox.updateProgress（）
Ext.MessageBox.updateProgress(value,”ProgressText”,”msg”) //(三個(gè)參數(shù)，看名字就知道意思)， 注意value為0-1之間的數(shù)，表示進(jìn)度條的進(jìn)度.
8.修改默認(rèn)的按鈕文字
Ext.Msg.buttonText={
yes:’ yes’,
no:’no’,
ok:’ok’,
cancel:’cancel’
};
Ext.Msg.buttonText.yes=’Yes’;
9.動(dòng)態(tài)跟新提示框
1)跟新提示文字
var msgBox = Ext.MessageBox.show({
title:’提示’,
msg:’動(dòng)態(tài)跟新的信息文字’,
modal:true,
buttons:Ext.Msg.OK
})
//Ext.TaskMgr是一個(gè)功能類，用來定時(shí)執(zhí)行程序，
//在這里我們使用它來定時(shí)觸發(fā)提示信息的更新。
Ext.TaskMgr.start({
run:function(){
msgBox.updateText(’會(huì)動(dòng)的時(shí)間：’+new Date().format(’Y-m-d g:i:s A’));
},
interval:1000
});
2).跟新進(jìn)度條及提示信息
var msgBox = Ext.MessageBox.show({
title:’提示’,
msg:’動(dòng)態(tài)跟新的進(jìn)度條和信息文字’,
modal:true,
width:300,
progress:true
})
var count = 0;//滾動(dòng)條被刷新的次數(shù)
var percentage = 0;//進(jìn)度百分比
var progressText = ”;//進(jìn)度條信息
Ext.TaskMgr.start({
run:function(){
count++; //刷新10次后關(guān)閉信息提示對話框
if(count > 10){
msgBox.hide();
}
//計(jì)算進(jìn)度
percentage = count/10;
//生成進(jìn)度條文字
progressText = ‘當(dāng)前完成度：’+percentage*100 + “%”;
//更新信息提示對話框
msgBox.updateProgress(percentage,progressText,
‘當(dāng)前時(shí)間：’+new Date().format(’Y-m-d g:i:s A’));
},
interval:1000
});