ExtJs懒人笔记(1) ExtJs初探

ExtJs学习目录

对于大多数做后台开发人员来说，要制作一个漂亮的页面实在是一件困难的事情,好的美感+CSS的良好应用，然后通过一大堆JS实现一些很炫的效果，如果能够完成，就是个全才了。但我相信有很多人员不能完成，不过也不必担心，前人已经为我们造好了，这就是所谓控件。笔者是从事.NET开发的，相信使用过.NET的人都从.NET提供的服务端控件中享受过便利。但是事实上，随着开发经验的积累，开发人员们越来越不愿意使用服务端控件，或者说他们更喜欢在客户端通过异步通讯实现和后台的交互。

总所周知jquery和extjs就是两款非常优秀的js库，而这两个框架我都接触过，Jquery确实是很强大，它的语法很简洁，所谓“多学一点Jquery，少写一行js代码”，jQuery UI 是功能很强大的客户端框架，要详细了解的童鞋可以浏览官网http://jquery.com/。

ExtJs也是刚接触不到两周，感觉也是很强大，他提供了丰富的客户端控件，只要应用得当，同样可以制作出很炫的效果(当然是没有美工的前提下，毕竟这里的空间都是统一的样式比较单调)。

Extjs的官方网站是http://www.extjs.com，目前最高版本是4.1。可以单击这里下载各种ExtJS版本。下载来的压缩包里边包含压缩后的extjs库，调试时用到的库，具有可读性的源代码，文档和例子。在开始之前，不妨先看下examples文件夹下的例子，对extjs有一个感性的认识，如果你觉得例子里边的效果让你心动，那么就一起开始extjs的学习之旅吧。

我这里使用的是ExtJs-3.4.0，其结构如下

其中，提供了比较详细的文档(docs)和实例(examples);

废话不多说，直接来个实例先，我也是初学，希望大家有好的方法和资料推荐一些，相互交流，共同成长。

学习程序都是从Hello,World开始的，这里也客串一下吧！

打开vs2010 ,新建一个空的MVC项目，然后新建一个HelloController,并新建相应视图，如下

然后添加ExtJs类库，这里存放在COntent下面，

先看视图

添加引用

View Code

 <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Content/ext-3.4.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="http://www.cnblogs.com/Content/ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script src="http://www.cnblogs.com/Content/ext-3.4.0/ext-all.js" type="text/javascript"></script>

做好准备，我们就可以在使用ExtJS了,vs对ExtJS也有较好的智能提示。

第一个实例——Hello，World

视图Code

View Code

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!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">
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Content/ext-3.4.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="http://www.cnblogs.com/Content/ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script src="http://www.cnblogs.com/Content/ext-3.4.0/ext-all.js" type="text/javascript"></script>
    <title>ExtJs第一堂课</title>
    <script language="javascript" type="text/javascript">
        Ext.onReady(function () {
            //Ext.Msg.alert("The First ExtDemo", "Hello,World!");
            Ext.Msg.alert("Every Body!Welcome To the ExtJs!");
            //ExtJs客户端演示HelloWorld
            Ext.get("ClientDemo").on("click", function () {
                Ext.Msg.alert("The First ExtDemo", "Hello,World!");
            });

            /*ExtJs+Ajax演示HelloWorld*/
            Ext.get("ExtJsAjaxDemo").on("click", function () {
                var url = "/Hello/GetString"; //需要请求的页面url
                Ext.Ajax.request({
                    url: url,
                    method: "POST",
                    success: function (response, option) {
                        var message = response.responseText;
                        Ext.Msg.alert("已接受从服务端传来的数据",message);
                    },
                    failure: function (response, option) {
                        response = Ext.util.JSON.decode(response.responseText);
                        core.alert.error(response.msg);
                    }
                });
            });

        })
    </script>
</head>
<body>
    <div>
        <input type="button" id="ClientDemo" value="ExtJs客户端演示HelloWorld" />
        <input type="button" id="ExtJsAjaxDemo" value="ExtJs+Ajax演示HelloWorld" />
    </div>
</body>
</html>

Controller中Code

View Code

  #region 返回一个字符串
        public string GetString()
        {
            return "First ExtJs Dedmo——Hello,World!";
        }
        #endregion

效果展示

ForstDem下载