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类里面．