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

  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

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

ü 谦虚天下

ü ExtJS 中文网