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