1、ExtJS-3.4.0下載
ExtJS官方網址：http://www.sencha.com/
2、ExtJS-3.4.0文檔目錄
ExtJS-3.4.0文檔目錄結構圖：
ExtJS-3.4.0文檔目錄說明：
◊ adapter目錄下是EXT的核心代碼和底層庫，包括jQuery、Prototype和YUI的適配器。
◊ docs目錄下是EXT的文檔。
◊ examples目錄下是官方的演示示例。
◊ pkgs目錄下是EXT壓縮后的代碼，經過壓縮的代碼體積更小，加載更快。
◊ resources目錄下是EXT要用到的圖片文件和樣式文件。
◊ src目錄下是EXT的源代碼文件，是相對pkgs目錄而言，未經過壓縮的代碼。
◊ ext-all.js文件是EXT的核心庫，是必須引入的。
◊ ext-all-debug.js文件是ext-all.js的調試版，在調試時使用這個調試版本的文件可以正確定位出現錯誤的位置。
◊ INCLUDE_ORDER.txt文件用來說明在頁面上引用底層庫的JavaScript文件的順序。
◊ license.txt文件是EXT的使用許可文件。
3、ExtJS-3.4.0簡單示例
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Scripts/ext-3.4.0/resources/css/ext-all.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/ext-3.4.0/adapter/ext/ext-base.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/ext-3.4.0/ext-all.js")" type="text/javascript"></script> @RenderSection("Header") </head> <body> @RenderBody() </body> </html>
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section Header{ <script type="text/javascript"> Ext.onReady(function () { Ext.MessageBox.alert('ExtJS-3.4.0', 'Hello World!'); }); </script> }
4、ExtJS-3.4.0項目引入文件
在EXT項目中需要引入的文件包括：ext-all.js、adapter/ext/ext-base.js、src/locale/ext-lang-zh_CN.js和整個resources目錄。
◊ ext-all.js和adapter/ext/ext-base.js包含EXT的全部功能，所以的JavaScript腳本都在這里。
◊ src/locale/ext-lang-zh_CN.js是簡體中文國際化的資源文件。
◊ resources目錄下是CSS樣式和圖片。
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Scripts/ext-3.4.0/resources/css/ext-all.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/ext-3.4.0/adapter/ext/ext-base.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/ext-3.4.0/ext-all.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/ext-3.4.0/src/locale/ext-lang-zh_CN.js")" type="text/javascript"></script> @RenderSection("Header") </head> <body> @RenderBody() </body> </html>
導入時，需要注意JavaScript腳本的順序。