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
效果展示
备注：由于限制上传大小，extjs包已经剔除。