ExtJS 4.2 教程-01：Hello ExtJS

時間 2019-11-12

標籤 extjs 4.2 教程 hello 简体版

原文原文鏈接

關於ExtJS 是什麼我就很少說了，本系列教程將介紹ExtJS 4.2的用法，這是本系列的第一篇，慣例從Hello World開始。javascript

下載 ExtJS

ExtJS 目前的最新版本是 4.2，咱們能夠從官方網站下載最新版本的ExtJS。css

下載地址：http://cdn.sencha.com/ext/gpl/ext-4.2.1-gpl.ziphtml

官網地址：http://www.sencha.com/products/extjsjava

下載完成之後，咱們就獲得了ExtJS 的源代碼、API文檔，以及示例內容。咱們先將壓縮包解壓縮，而後在IIS中新建一個網站，網站路徑指向ExtJS 的目錄，這樣方便咱們瀏覽ExtJS的文檔等內容。不懂新建網站的朋友請自行百度谷歌。bootstrap

我是在IIS 的Default Web Site中新建應用程序，使用默認的應用程序池，建好之後以下圖：服務器

咱們瀏覽一下網站：工具

在ASP.NET MVC 中使用ExtJS 4.2

因爲我本人是作ASP.NET Web 開發的，因此我在本教程中使用 ASP.NET MVC 做爲示例，開發工具天然是微軟的Visual Studio 2012（你也能夠在任意的Web頁面中使用ExtJS，做爲一個JS庫，它不受Web 服務器端開發的限制）。post

首先咱們新建一個ASP.NET MVC 4 應用程序，名稱爲 SampleExtJS。開發工具

而後在項目中添加一個文件夾「Resources」，咱們將項目中全部用到的js、css、image等資源文件都放在這個文件夾中。測試

在js目錄中新建ExtJS_4.2文件夾，用來存放ExtJS 4.2 的相關資源：

若是將全部的文件都添加到項目中，很明顯是有些龐大了，因此咱們能夠添加用到的內容，簡化後的目錄結構以下：

接下來咱們要在layout.cshtml 頁面中添加引用。在使用ExtJS的時候，咱們必需要引用腳本和樣式兩部分。腳本的內容能夠經過bootstrap.js來自動添加，而樣式則須要咱們手動的來添加了，例如咱們要在項目中使用neptune樣式（neptune 是在4.2中新增的樣式，看上去比較現代一些，但不支持IE6），那麼咱們須要引入的文件以下：

<link href="~/Resources/js/ExtJS_4.2/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script src="~/Resources/js/ExtJS_4.2/bootstrap.js"></script>

完整的Layout代碼以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Resources/js/ExtJS_4.2/resources/css/ext-all-neptune.css" rel="stylesheet" />
    <script src="~/Resources/js/ExtJS_4.2/bootstrap.js"></script>

    @RenderSection("script", false)
</head>
<body>
    @RenderBody()
</body>
</html>

Hello ExtJS

在引入文件後，咱們要測試一下ExtJS 是否正常的工做了。在Views>Home>Index.cshtml中，咱們爲script 節添加內容：

@section script{
<script type="text/javascript">
        function init() {
            Ext.MessageBox.alert("ExtJS", "Hello ExtJS");
        }
        Ext.onReady(init);
    </script>
}

一樣在IIS中爲Default Web Site 添加應用程序，路徑爲咱們剛建好的SampleExtJS的根目錄。而後瀏覽網站：

本地化ExtJS

在咱們保留的ExtJS文件中，有一個locale目錄，咱們保留了其中的 ext-lang-zh_CN.js 文件，這個文件是咱們漢語的本地化文件，咱們只須要添加該文件的引用，就可以輕鬆的實現ExtJS的本地化：

<script src="~/Resources/js/ExtJS_4.2/locale/ext-lang-zh_CN.js"></script>

將這段代碼添加到Layout文件中，而後刷新頁面：

剛纔的OK 如今變成了「肯定」。

相關標籤/搜索

extjs+mvc4+petapoco+autofac+automapper

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。