ExtJS 学习系列（2）---Message Box 详解 （2）

3.Message Box API 简介（2）

接着上面的API继续介绍。

lgetDialog() : Ext.Window

返回 Ext.Window 元素下的一个引用

参数:

无.

Returns:

Ext.Window

 

lhide() : Ext.MessageBox

把显示着的当前message box隐藏起来。

参数:

无.

Returns:

Ext.MessageBox

this

 

lisVisible() : Boolean

如果Message box 是显示着的，返回true

参数:

无.

Returns:

Boolean

显示 返回true 否则 false

 

lprogress( String title, String msg, [String progressText] ) : Ext.MessageBox

显示一个带进度条的Message box. 其中没有按钮，用户不能关闭。我们必须对通过Ext.MessageBox.updateProgress创建的更新负责，当结束的时候，予以关闭。

参数:

title : String

标题

msg : String

消息体

progressText : String

(可选的) progress bar 也就是进度条里面的内容(默认 '')

Returns:

Ext.MessageBox

this

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><scripttype="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.progress('title','message');
});
</script>

 

效果如下。一个静止的进度条。

 

 

lprompt( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] ) : Ext.MessageBox

 

显示一个窗口带OK和Cancle按钮，并暗示用户进入某一个文档区域，它可以是单行或者多行的textbox.在任何一个按钮按下之后，回调函数都会被执行,其方式同confirm。

参数:

title : String

标题

msg : String

信息内容

fn : Function

(可选的) 函数执行之后窗体关闭

scope : Object

(可选的) 回调函数范围

multiline : Boolean/Number

(可选的) True的话就是可以多行显示使用defaultTextHeight 属性。或者用高度（像素）创建。（默认的是单行输入）

value : String

(可选的) 默认的输入框内容 (defaults to '')

Returns:

Ext.MessageBox

this

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><scripttype="text/javascript">
functionf()
{
prompt('窗口','输入名字',f);
}

Ext.onReady(function(){
Ext.get("btn1").on("click",f);
});

</script>

按钮部分。

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><inputid="btn1"type="button"value="alert"/>

显示结果下图所示。

 

lsetIcon( String icon ) : Ext.MessageBox

在对话框中加一个特殊的图案. 默认情形下'ext-mb-icon' 提供样式可以使用,清空的字符串('')清空存在的ICON. 以下是构建好了的名字，也可以使用自己定义的:

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->Ext.MessageBox.INFO

Ext.MessageBox.WARNING

Ext.MessageBox.QUESTION

Ext.MessageBox.ERROR

参数:

icon : String

一个指定的CSS类名字

Returns:

Ext.MessageBox

this

MessageBox

 

lshow( Object config ) : Ext.MessageBox

显示一个新的消息框，或者基于已经传递了的config选项重置一个旧的. All display functions (比如 prompt, alert, 等等)在Message Box内部调用的，虽然这些调用采取了一些捷径并且不支持所有的配置选项.

参数:

Øconfig : Object

如下:

üanimEl : String/Element

一个Message Box当它打开或者关闭的时候应该赋予的ID或者是元素(默认没有定义)

übuttons : Object/Boolean

一个按钮config对象(例如Ext.MessageBox.OKCANCEL or {ok:'Foo', cancel:'Bar'}),或者是false就不显示任何的按钮(默认是false)

üclosable : Boolean

False 就是窗口是不能关闭的。注意，进程和等待对话框将要忽视这个属性，病情一直隐藏关闭窗口就想他们只能程序性的关闭。（注意progress和wait对话框将要忽视这个属性并且通常隐藏起来，因为它是可以被程序关闭的.）

ücls : String

可以自定义的messagebox中的CSS样式。

defaultTextHeight : Number

以像素为单位单位的允许多行输入的文本框的高度(默认75)

üfn : Function

函数的具体说了

ubuttonId : String

按下的按钮的ID是，以下的一种之一

ok

yes

no

cancel

utext : String

输入区域的值如果{@link #show-option-prompt prompt} 或者 {@link #show-option-multiline multiline} 是true

üscope : Object

回调函数的范围

üicon : String

同上

üiconCls : String

同上

ümaxWidth : Number

对话框最大宽度（像素） (默认600)

üminWidth : Number

对话框最小宽度（像素）(默认100)

ümodal : Boolean

False 就是用户可以和MessageBox互动(默认true)

ümsg : String

一个字符串将要代替消息框里面消息体的内容(defaults to the XHTML-compliant non-breaking space character '')

ümultiline : Boolean

True 暗示用户可以多行输入 (默认false)

üprogress : Boolean

True显示一个进度条(默认false)

üprogressText : String

progress = true 显示进度条里面的内容(默认to '')

üprompt : Boolean

True为暗示用户输入单行的信息 (默认false)

üproxyDrag : Boolean

True为拖拽的时候显示一个轻量级别代理(默认false)

ütitle : String

标题内容

üvalue : String

The string value to set into the active textbox element if displayed

üwait : Boolean

True显示进度条(默认 false)

üwaitConfig : Object

一个 Ext.ProgressBar.waitConfig 对象 (只有当wait = true有效)

üwidth : Number

以像素为单位的对话框的宽度

²例子:

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->Ext.Msg.show({

title:'Address',

msg:'Pleaseenteryouraddress:',

width:300,

buttons:Ext.MessageBox.OKCANCEL,

multiline:true,

fn:saveAddress,

animEl:'addAddressBtn',

icon:Ext.MessageBox.INFO

});

Returns:

Ext.MessageBox

this

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><scripttype="text/javascript">
Ext.onReady(function(){
Ext.get("btn1").on(
"click",
function(){
Ext.MessageBox.show({
title:"一个用时间控制的进度条",
msg:"10s后关闭进度框",
progress:true,
width:600,
wait:true,
waitConfig:{interval:1000},
closable:true
});
setTimeout(function(){Ext.MessageBox.hide()},10000);//10s之后调用hide（）函数关闭窗口
})
});
</script>

当progress为true 的时候，进度条是被显示的。每个1s进度条就会动一下。

 

lupdateProgress( Number value, String progressText, String msg ) : Ext.MessageBox

更新一个进程样式的消息框的内容和进度条.只有相关的消息框通过Ext.MessageBox.progress创建的或者调用了Ext.MessageBox.show方法的进程: true.

参数:

value : Number

0和1之间的任何数 (默认0)

progressText : String

进度条里面的显示内容 (默认'')

msg : String

消息框主体内容被指定的消息代替 (默认没有定义so that any existing body text will not get overwritten by default unless a new value is passed in)

Returns:

Ext.MessageBox

this

 

lupdateText( [String text] ) : Ext.MessageBox

更新消息框中的内容

参数:

text : String

(可选择) 把消息框中的元素用innerHTML 特殊字符串代替 (默认的 XHTML-compliant non-breaking 空'')

Returns:

Ext.MessageBox

this

 

lwait( String msg, [String title], [Object config] ) : Ext.MessageBox

显示一个可以带有自动更新的进度条消息框. 这个可以用来中断用户互动当有一个长时间等待进度条的完成 并没有定义好的间歇. 当更新进行完了之后应该关闭。.

参数:

msg : String

消息体内容

title : String

(可选的) 进度条标题

config : Object

(可选的) 一个Ext.ProgressBar.waitConfig对象

Returns:

Ext.MessageBox

This

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><scripttype="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.wait('title',
'msg',
{interval:100,//速度很快
duration:5000,
increment:15,
text:'Updating',
scope:this,
fn:function(e){
alert(e);}
});
});
</script>

 

间歇时间0.1秒，5秒之后结束，每次增加数值15.显示内容是Updating...显示5秒结束之后。弹出对话框来。

 

 

附上：Ext.ProgressBar.waitConfig对象内容。看参数也能知道具体的是什么，持续时间，间隔，增长，内容，函数和范围。时间仓促，暂时不翻译。

 

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->PropertyTypeDescription
--------------------------------------------------------------------------------------------
duration数值Thelengthoftimeinmillisecondsthattheprogressbarshould
runbeforeresettingitself(defaultstoundefined,inwhichcaseit
willrunindefinitelyuntilresetiscalled)
interval数值Thelengthoftimeinmillisecondsbetweeneachprogressupdate
(defaultsto1000ms)
increment数值Thenumberofprogressupdatesegmentstodisplaywithintheprogress
bar(defaultsto10).Ifthebarreachestheendandisstill
updating,itwillautomaticallywrapbacktothebeginning.
textStringOptionaltexttodisplayintheprogressbarelement(defaultsto'').
fnFunctionAcallbackfunctiontoexecuteaftertheprogressbarfinishesauto-
updating.Thefunctionwillbecalledwithnoarguments.Thisfunction
willbeignoredifdurationisnotspecifiedsinceinthatcasethe
progressbarcanonlybestoppedprogrammatically,soanyrequiredfunction
shouldbecalledbythesamecodeafteritresetstheprogressbar.
scope对象Thescopethatispassedtothecallbackfunction(onlyapplieswhen
durationandfnarebothpassed).

 

4.总结

关于MessageBox在API 上面的所有的控件，暂时就说这么多。本人新手，没有什么太大的水平。Demo写的也不是很好。觉得能写的都写上了。我觉的API上面的例子比较少。而且特别的凌乱。所以加上了一部分自己的写法和心得。希望或多或少能给大家带来一份新鲜。如果有什么不对的，请大家及时提出。我将不胜感激。

参考资料：

üJavaEye

üExtJS API

ü冷雨《ExtJS2.0实用简明教程》

ü谦虚天下

üExtJS 中文网

 

 

---

 

作者：Alexliu（alex dotNet Learning）
出处：http://alexliu.cnblogs.com/

欢迎加入：http://www.itpob.cn/bbs