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包已經剔除。