看了Ext的API 文档后,开始自己尝试做一些修改,并安装自己项目所需写一个小的Demo程序,再以后开发的时候可以很方便的引用进来。
本次要达到的要求:一个可定义标题内容的对话框,并要求可在5秒后自动关闭。效果如下:
这些信息窗口涉及到了Ext.MessageBox 类下的show方法中title、msg、closable属性的设置。Ext.MessageBox 可以简写为Ext.Msg 这个类下面的方法和属性设置还是挺丰富的。但是我们一般比较常用的就是show。
在这个程序中我们还用到了JS的计时函数在执行关闭。
下面看一下HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" _fcksavedurl=""js/ext/resources/css/ext-all.css"" _fcksavedurl=""js/ext/resources/css/ext-all.css"" _fcksavedurl=""js/ext/resources/css/ext-all.css"" _fcksavedurl=""js/ext/resources/css/ext-all.css"" />
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<!--上面3行分别是引用Ext类库和CSS样式-->
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
Ext.Msg.show({title:"信息通知",msg:"尊敬的客户您好,您所提交的申请正在审核当中,请十五分钟后重试,谢谢!<br /><br /> 本窗口5秒后自动关闭。",buttons:{ok:'确定',cancel:'取消'}});
</script>
<!--使用Ext.Msg.show 这个方法建立一个对话框。并定义了标题(title),对话框里面的内容(msg),定义了2个按钮(buttons)-->
<script type="text/javascript">
setTimeout(closeMsg,5000);
function closeMsg(){
Ext.Msg.hide();}
</script>
<!--通过时间函数执行closeMsg()这个方法,并执行了里面包含的Ext.Msg.hide()这个方法,这个方法的作用是关闭对话框-->
</form>
</body>
</html>
这里我也遇到了一个问题,我觉得这段代码写的有点不妥:
<script type="text/javascript">
setTimeout(closeMsg,5000);
function closeMsg(){
Ext.Msg.hide();}
</script>
我觉得应该可以直接这样来执行
<script type="text/javascript">
setTimeout(Ext.Msg.hide,5000);
</script>
但是很奇怪出错了,时间到无法执行,后面一想,5秒后执行Ext.Msg.hide那肯定是无效的,关闭对话框的方法是Ext.Msg.hide()
那好,查找了一下setTimeOut的方法,终于找到了办法: setTimeout(“Ext.Msg.hide()”,5000); 其实这样写就OK了 。其实运行起来还度了2个按钮,一个确认一个取消,其实可以直接弄成一个叫关闭即可。好了今天的简单的例子就讲到这里。有什么问题欢迎交流。
作者:左倾45度 2010.4.30
感谢 it54/" target="_blank">左倾45度 的投稿