服务咨询热线:

022-88711099

当前位置:

extjs-基础篇:第二篇,精美的Ext式样的消息框

发布时间:2012-6-15 23:26 作者: 殷良胜 访问量:1512

extjs-基础篇:第二篇,精美的Ext式样的消息框

 

精美的消息框截图了

感觉就像写书一样,好难,不过我有玩游戏的精神,难亦易也.

如果你看到了上文,那么我想你手上现在应该有Ext2.2的文件了吧.

这里再说一次,所有的程序除非有说明,则全部是以2008 c#.net为前提,虽然Ext不在乎你使用什么语言,但我只会.net.

好,首先建立一个新的网站吧,然后把你下载的Ext2.2文件复制到网站的任何一个目录里面,在页面设置正确的路径即可.如下图所示:

需要说明一点,以后所有的程序都不再罗列整个页面,只写出<body></body>之间的语句

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>

//下面是整个Ext框架所必备的文件,除了中文映射老外不需要外
<link rel="Stylesheet" type="text/css" href="../ExtJS/resources/css/ext-all.css" />//样式文件
<script type="text/javascript" src="../ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ExtJS/ext-all.js"></script>
<script type="text/javascript" src="../ExtJS/ext-lang-zh_CN.js"></script> //中文映射
</head>

<%--这是一个 asp.net的页面头部分.在里面输入正确访问Ext的路径.顺序更要注意哦,而且绝对不可以颠倒.

有了上面的正确的引用后,我们就要开始实战演练了.

好吧,我们也是从 hello世界 开始吧!--%>

<body>
<form id="form1" runat="server">
<div>
<%--既然Ext是基于javascript的,所以我们要把Ext的东东包裹在javascript里面--%>
<script type="text/javascript">
//定义一个函数,在里面定义一个弹出按钮,当网页上出现弹出按钮后,点击就会出现hello世界了.
function ready()
{
// 下面openMs就是出发事件后所执行的函数

var openMsg = function()
{
//alert("good");比较下ext的弹出消息框是多么多么的令人狂喜
Ext.Msg.alert("提示消息,可以自定义","hello世界-hello世界-hello世界-hello世界");
};

//定义Ext的按钮
var 弹出按钮 = new Ext.Button
({
id:"btnOpen", //定义按钮的ID
text:"弹出按钮", //定义按钮的标题
handler:openMsg, //定义按钮出发的事件,handler后面直接写函数的名称openMsg
//也可以写成下面这样,本质是一样的,效果也是一样的
//handler:function(){Ext.Msg.alert("提示消息,可以自定义","hello世界-hello世界-hello世界-hello世界"); },
renderTo:document.body//将弹出按钮渲染到窗体上
});
}
Ext.onReady(ready);//里面的参数就是上面定义的函数

//onReady是使用Ext的入口,只有在上面所说的Ext框架全部加载完成后,才会执行Ext.onReady里面所包含的函数,就是说具体执行什么函数,由Ext的onReady方法指定.

//当然onReady这个Ext方法总共有三个参数,为了力求简单,这里先使用一个参数,在提高篇里面则会详细讲解.

</script>
</div>
</form>
</body>
</html>

上面是一个完整的asp.net网页,路径正确后,就可以直接在页面显示出来.

精美的消息框截图了

另外,提一句,Ext的所有消息框都封装在Ext.Msg类里面.

源代码下载