首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

ExtJs之讯息框

2013-03-04 
ExtJs之消息框? ?点击OK之后,出现如下网页提示.??2.输入框.语法:?如果显示多行,请看下面例子代码:效果图:?

ExtJs之消息框
? ?

点击OK之后,出现如下网页提示.
ExtJs之讯息框
?
?2.输入框.

语法:

?如果显示多行,请看下面例子代码:

效果图:

ExtJs之讯息框
?
ExtJs之讯息框
?

3.确认框.

确认框提示用户作出选择,语法如下:

我们可以通过回调函数的参数btn采取相应的行动。

?

效果图:

ExtJs之讯息框
?
ExtJs之讯息框
?

?

4.自定义消息框.

如果上面所有的消息框都无法满足我们的需求,譬如没有图标、按钮类型太少,甚至更BT的,如果想要个进度条怎么办?哈哈,别急,Extjs息数为你想到了。我们可以使用show()方法自定义消息框,只需要稍微配置一下就可以了。

show()方法的语法如下:

?效果图:

ExtJs之讯息框

在上面的例子中,不熟悉的有buttons 和icon,这些选项在Ext.MessageBox 中已有定义。

buttons(按钮)的取值如下:

OK:只有“确定”按钮

CANCEL:只有“取消”按钮

OKCANCEL:有“确定”和“取消”按钮

YESNO:有“是”和“否”按钮

YESNOCANCEL:有“是”、“否”和“取消”按钮

icons(图标)取值如下:

INFO:信息图标

WARNING:警告图标

QUESTION:询问图标

ERROR:错误图标?

?

5.进度条对话框.

进度条对话框可以说是一个创举,让一个富了现实意义和使用价值的进度条轻松实现,随着进度条的滚动,我们的心情也随之畅快起来。代码赋予我们无穷的活力,让人们的视觉再次受到最强烈的冲击。

进度条对话框也是一个自定义消息框,配置config 时添加progress=true 即可,同时还可以设置其他相关信息,如进度提示等。Extjs 为我们提供的只是一个对话框而已,进度条的滚动还得通过代码实现。下面是进度条的代码示范:

例子代码如下:

在上面的代码中,progressText 属性是进度条滚动之前最初的文本,滚动进程由updateProgress(Number value, String progressText)方法来定义,参数value是从0~1之间的小数,表示进度百分比;progressText 则表示进度条滚动过程中的文本提示信息,如Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% 已完成');。?

?

6.让消息框飞出来.

很显然,这是一个动画效果。Extjs 允许我们将消息框从指定的位置飞出来,关闭时又飞回去,很炫吧!实现也相当轻松,只要设置animEl 选项即可,该选项指定一个标签,即消息框从标签处飞出,关闭后又飞回标签。下面是演示代码:

?

?

热点排行
Bad Request.