extjs 彈出框，消息框

實力決定地位 2011-11-21

展開全文

title: 標題
msg: 提示內(nèi)容
fn: 提示框關(guān)閉之后自動調(diào)用的回調(diào)函數(shù)
scope: 作用域，用于指定this指向哪里

例如：

Js代碼

ExtJsAlert = function(){
Ext.MessageBox.alert("提示框"，"這是一個提示框");
}
or
ExtJsAlert = function(){
Ext.MessageBox.alert("提示框"，"這是一個提示框",function(){
alert("提示框關(guān)閉")
});
}

view plain copy to clipboard print ?

ExtJsAlert = function(){
Ext.MessageBox.alert("提示框"，"這是一個提示框");
}
or
ExtJsAlert = function(){
Ext.MessageBox.alert("提示框"，"這是一個提示框",function(){
alert("提示框關(guān)閉")
});
}

如果要將上面的代碼運行，則要將改源碼保存JS，然后導(dǎo)入頁面中，增加

Html代碼

<input type="button" value="點擊" onclick="ExtJsAlert();"/>

view plain copy to clipboard print ?

<input type="button" value="點擊" onclick="ExtJsAlert();"/>

2. ExtJs 之輸入框
語法：Ext.MessageBox.prompt(String title, String msg,Function fn,Object scope,Boolean/Number multiline);
參數(shù)定義：

title: 標題
msg: 提示內(nèi)容
fn: 提示框關(guān)閉之后自動調(diào)用的回調(diào)函數(shù)
scope: 作用域，用于指定this指向哪里
Boolean/Number:如果為true或為數(shù)字，則表示允許輸入多行或者指定默認高度

例如：

Js代碼

ExtJsPrompt = function(){
Ext.MessageBox.prompt("輸入框","請輸入名字：",function(bu,txt){
Ext.MessageBox.alert("Result","你點擊的是"+bu+"按鈕,<br> 輸入的內(nèi)容為："+txt);
});
}
or
ExtJsPrompt = function(){
Ext.MessageBox.prompt("輸入框","請輸入名字：",function(bu,txt){
Ext.MessageBox.alert("Result","你點擊的是"+bu+"按鈕,<br> 輸入的內(nèi)容為："+txt);
},this,300);
}

view plain copy to clipboard print ?

ExtJsPrompt = function(){
Ext.MessageBox.prompt("輸入框","請輸入名字：",function(bu,txt){
Ext.MessageBox.alert("Result","你點擊的是"+bu+"按鈕,<br> 輸入的內(nèi)容為："+txt);
});
}
or
ExtJsPrompt = function(){
Ext.MessageBox.prompt("輸入框","請輸入名字：",function(bu,txt){
Ext.MessageBox.alert("Result","你點擊的是"+bu+"按鈕,<br> 輸入的內(nèi)容為："+txt);
},this,300);
}

3.ExtJs之確認框
語法：
Ext.MessageBox.confirm(String title, String msg,Function fn, Object scope);
參數(shù)定義：

title: 標題
msg: 提示內(nèi)容
fn: 提示框關(guān)閉之后自動調(diào)用的回調(diào)函數(shù)
scope: 作用域，用于指定this指向哪里

例如：

Js代碼

ExtJsComfirm = function(){
Ext.MessageBox.confirm("確認"，"請點擊下面的按鈕作出選擇",function(btn{
Ext.MessageBox.alert("你單擊的按鈕是："+btn);
});
}

view plain copy to clipboard print ?

ExtJsComfirm = function(){
Ext.MessageBox.confirm("確認"，"請點擊下面的按鈕作出選擇",function(btn{
Ext.MessageBox.alert("你單擊的按鈕是："+btn);
});
}

4. ExtJs之自定義消息框
語法：
Ext.MessageBox.show(Object config); config屬性說明：

title : 消息框標題欄
msg:消息內(nèi)容
width:消息框的寬度
multiline: 是否顯示多行文本
closable:是否顯示關(guān)閉按鈕
buttons:按鈕
icon:圖標
fn:回調(diào)函數(shù)

例如

Js代碼

ExtJsCustom = function(){
var config ={
title:"自定義對話框",
msg:"這是一個自定義對話框",
width:400,
multiline:true,
closable:false,
buttons:Ext.MessageBox.YESNOCANCEL,
icon:Ext.MessageBox.QUESTION,
fn: function(btn,txt){
Ext.MessageBox.alert("Result","你點擊了'yes'按鈕<br>,輸入的值是："+txt);
};
Ext.MessageBox.show(config);
}

view plain copy to clipboard print ?

ExtJsCustom = function(){
var config ={
title:"自定義對話框",
msg:"這是一個自定義對話框",
width:400,
multiline:true,
closable:false,
buttons:Ext.MessageBox.YESNOCANCEL,
icon:Ext.MessageBox.QUESTION,
fn: function(btn,txt){
Ext.MessageBox.alert("Result","你點擊了'yes'按鈕<br>,輸入的值是："+txt);
};
Ext.MessageBox.show(config);
}

注意：在ExtJs.MessageBox中已經(jīng)定義了buttons的取值.如下

引用

OK：只有"確定"按鈕
CANCEL:只有"取消"按鈕
OKCANCEL:有"確定"和"取消"按鈕
YESNO: 有"是"和"否"按鈕
YESNOCANCEL：有"是"、"否"和"取消"按鈕

icons取值如下

引用

INFO:信息圖標
WARNING:警告圖標
QUESTION:詢問圖標
ERROR:錯誤圖標

5.ExtJs之進度條對話框
進度條對話框也是自定義消息框的一種，只是在配置Config時添progress=true即可,同時在設(shè)置其他相關(guān)信息，比如進度提示。
下面看看代碼：

Js代碼

ExtJsProgress = function(){
Ext.MessageBox.show({
title:'請等待片刻',
msg:'正在加載項目....',
progressText:'正在初始化...',
Width:300,
progress:true,
closable:false
});
var f = function(v){
return function(){
if(v == 12){
Ext.MessageBox.hide();
Ext.MessageBox.alert('完成','所有項目加載完成!');
}else{
var i = v/11;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%以完成');
}
};
};
for(var i=0; i<13;i++){
setTimeout(f(i),i*500);
}
}

view plain copy to clipboard print ?

ExtJsProgress = function(){
Ext.MessageBox.show({
title:'請等待片刻',
msg:'正在加載項目....',
progressText:'正在初始化...',
Width:300,
progress:true,
closable:false
});
var f = function(v){
return function(){
if(v == 12){
Ext.MessageBox.hide();
Ext.MessageBox.alert('完成','所有項目加載完成!');
}else{
var i = v/11;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%以完成');
}
};
};
for(var i=0; i<13;i++){
setTimeout(f(i),i*500);
}
}

解析上述代碼中ProgressText屬性是進度條滾動之前最初的文本，滾動進程由updateProgress(Number value,String progressText)方法來定義,參數(shù)value是從0-1之間的小數(shù)，表示進度百分比;progressText則表示進度條滾動過程中的文本提示信息。

6.ExtJs之消息框動畫效果
直接看代碼

Js代碼