3.Message Box API 简介(2)
接着上面的API继续介绍。
l getDialog() : Ext.Window
返回 Ext.Window 元素下的一个引用
参数:
无.
Returns:
Ext.Window
l hide() : Ext.MessageBox
把显示着的当前message box隐藏起来。
参数:
无.
Returns:
Ext.MessageBox
this
l isVisible() : Boolean
如果Message box 是显示着的,返回true
参数:
无.
Returns:
Boolean
显示 返回true 否则 false
l progress( 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
<script type = "text/javascript">
Ext.onReady(function(){
Ext.MessageBox.progress('title','message');
});
</script>
效果如下。一个静止的进度条。
l prompt( 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
<script type = "text/javascript">
function f()
{
prompt('窗口','输入名字',f);
}
Ext.onReady(function(){
Ext.get("btn1").on("click",f);
});
</script>
按钮部分。
<input id="btn1" type="button" value="alert" />
显示结果下图所示。
l setIcon( String icon ) : Ext.MessageBox
在对话框中加一个特殊的图案. 默认情形下'ext-mb-icon' 提供样式可以使用,清空的字符串('')清空存在的ICON. 以下是构建好了的名字,也可以使用自己定义的:
Ext.MessageBox.INFO
Ext.MessageBox.WARNING
Ext.MessageBox.QUESTION
Ext.MessageBox.ERROR
参数:
icon : String
一个指定的CSS类名字
Returns:
Ext.MessageBox
this
MessageBox
l show( 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
函数的具体说了
u buttonId : String
按下的按钮的ID是,以下的一种之一
ok
yes
no
cancel
u text : 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
以像素为单位的对话框的宽度
² 例子:
Ext.Msg.show({
title: 'Address',
msg: 'Please enter your address:',
width: 300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
fn: saveAddress,
animEl: 'addAddressBtn',
icon: Ext.MessageBox.INFO
});
Returns:
Ext.MessageBox
this
<script type = "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进度条就会动一下。
l updateProgress( 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
l updateText( [String text] ) : Ext.MessageBox
更新消息框中的内容
参数:
text : String
(可选择) 把消息框中的元素用innerHTML 特殊字符串代替 (默认的 XHTML-compliant non-breaking 空' ')
Returns:
Ext.MessageBox
this
l wait( String msg, [String title], [Object config] ) : Ext.MessageBox
显示一个可以带有自动更新的进度条消息框. 这个可以用来中断用户互动当有一个长时间等待进度条的完成 并没有定义好的间歇. 当更新进行完了之后应该关闭。.
参数:
msg : String
消息体内容
title : String
(可选的) 进度条标题
config : Object
(可选的) 一个Ext.ProgressBar.waitConfig对象
Returns:
Ext.MessageBox
This
<script type = "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对象内容。看参数也能知道具体的是什么,持续时间,间隔,增长,内容,函数和范围。时间仓促,暂时不翻译。
Property Type Description
---------- ------------ ----------------------------------------------------------------------
duration 数值 The length of time in milliseconds that the progress bar should
run before resetting itself (defaults to undefined, in which case it
will run indefinitely until reset is called)
interval 数值 The length of time in milliseconds between each progress update
(defaults to 1000 ms)
increment 数值 The number of progress update segments to display within the progress
bar (defaults to 10). If the bar reaches the end and is still
updating, it will automatically wrap back to the beginning.
text String Optional text to display in the progress bar element (defaults to '').
fn Function A callback function to execute after the progress bar finishes auto-
updating. The function will be called with no arguments. This function
will be ignored if duration is not specified since in that case the
progress bar can only be stopped programmatically, so any required function
should be called by the same code after it resets the progress bar.
scope 对象 The scope that is passed to the callback function (only applies when
duration and fn are both passed).
4.总结
关于MessageBox在API 上面的所有的控件,暂时就说这么多。本人新手,没有什么太大的水平。Demo写的也不是很好。觉得能写的都写上了。我觉的API上面的例子比较少。而且特别的凌乱。所以加上了一部分自己的写法和心得。希望或多或少能给大家带来一份新鲜。如果有什么不对的,请大家及时提出。我将不胜感激。
参考资料:
ü JavaEye
ü ExtJS API
ü 谦虚天下