EXTJS学习系列基础篇:第二篇(转载)作者殷良胜
基础篇:第二篇,本节主要是介绍如何完成第一个Ext的程序，该示例演示的是：定义一个Ext的按钮组件，点这个按钮后就会弹出一个非常精美的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类里面．
