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

posted @ 2008-11-03 15:00  温景良(Jason)  Views(1236)  Comments(0Edit  收藏  举报