前言
本文原文鏈接地址 http://aehyok.com/Blog/Detail/48.html
來學習一下ExtJs，今天主要來了解一下ExtJs在Asp.Net Mvc3.0中的基本架構搭建。
所使用的ExtJs版本為4.1.1,下載地址為http://cdn.sencha.io/ext-4.1.1-gpl.zip?ref=extjs.org.cn
搭建ExtMVC環境
1.創建一個Asp.Net Mvc3.0的Web空項目，視圖引擎選擇Razor。
創建好項目后，要在解決方案資源管理器中進行處理：
- 將Content和Scripts目錄下的文件全部刪除。
- 再在Content目錄下創建一個Images目錄。
- 在Scripts目錄下創建app和ExtJS兩個目錄。
- 在app目錄下，再創建controller、model、store和 view這4個目錄，分別用來存放項目中Ext JS的控制器、模型、Store和視圖文件。
- 再在ExtJS目錄下創建一個ux目錄，用來存放Ext JS的擴展組件。
管理系統將使用Ext JS是4.1.1的版本。
- 在Ext JS 4.1.1包中將bootstrap.js、ext-all.js和ext-all-dev.js這三個文件和resources目錄復制到解決方案的ExtJS目錄下。
- 將local目錄下的中文語言包ext-lang-zh_CN.js也復制到ExtJS目錄下。
- 在Ext JS包目錄內搜索s.gif文件，將其復制到Content目錄下的Images目錄。
實現Hello World
1.在Controllers添加控制器HomeController,並在Index Action上直接添加視圖（添加視圖時記得 使用布局或母版頁的選項不勾）。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
2.添加頁面編碼說明及Ext JS樣式和腳本的引用將上面視圖內容修改為
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="@Url.Content("Scripts/ExtJs/resources/css/ext-all.css")" />
<script type="text/javascript" src="@Url.Content("Scripts/ExtJs/bootstrap.js")"></script>
<script type="text/javascript" src="@Url.Content("Scripts/ExtJs/Ext-lang-zh_CN.js")"></script>
</head>
<body>
<div>
</div>
</body>
</html>
3.然后將body中的div刪除，添加一個script塊，在塊內添加Ext.onReady函數塊，並在onReady函數內先添加空白圖片的驗證，這里要注意圖片的目錄，具體代碼如下
最后再添加一個alert的提示信息
<script>
Ext.onReady(function () {
if (Ext.BLANK_IMAGE_URL.substr(0, 4) != "data") {
Ext.BLANK_IMAGE_URL = "Content/Images/s.gif";
}
Ext.Msg.alert("提示信息", "你好！");
})
</script>
4.點擊運行。
總結
就這樣，你就初步實現了一個Hello World。
示例代碼下載地址為http://files.cnblogs.com/aehyok/ExtMVCOne.rar