這個教程叫告訴你如何開始基于 Sencha Ext JS 4 開發程序，同時提供完整的教程源碼和 3 個高清的視頻講解。
準備工作
你無需單獨為 Sencha 安裝開發環境，只需要有一個 Web 瀏覽器、Web 服務器和一個文本編輯器即可。我使用的是 Mac 機器和 Chrome 瀏覽器，使用 Mac 的 Web 服務器和 Komodo 編輯器，你可從 Sencha Getting Started 鏈接中獲取如何安裝環境的說明。
Hello World
一般我們在學習一種新語言或者技術時，都會編寫一個 Hello World 程序來快速的了解語言的開發工作。在這個例子中，我們在 Hello world 基礎上增加一些東西，我們添加一個 Viewport 組件、Sencha classpathing ，一個定制的超類和之類，以及一個 mixin 類的實例。
項目輸出結果
該示例程序運行后的結果如下圖所示，我同時使用桌面瀏覽器和手機瀏覽器來查看運行結果，Sencha 同時提供了 Sencha Touch，主要用來構建智能手機上的應用，但今天我們主要講桌面版的 Ext JS。
調試：在 chrome 窗口中，通過 Chrome 內置的開發者工具 (Built-In View->Developer->Developer’s Tools) 可看到 Sencha Ext JS 的輸出：
In Chrome on Mac
In iOS (Via Emulator)
入口
你可看到 index.html 加載了三個外部文件
<html>
<head>
<title>Hello World</title>
<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="./libs/resources/css/ext-all.css">
<!-- LIBS -->
<script type="text/javascript" src="./libs/ext-all-debug.js"></script>
<!-- APP -->
<script type="text/javascript" src="./app.js"></script>
</head>
<body></body>
</html>
樣式
我使用了在一些基本的教程中找到的默認的 CSS，沒有做任何編輯工作。
ExtJS 的幾種庫文件
還有一些其他的選擇，具有獨特的優勢。
如下：
- ext-all-debug-w-comments.js – 整個框架的調試版本，包含注釋信息，該文件很大，占用更多的處理器資源
- ext-all-debug.js – 與上面文件相同，但是缺少注釋，還是很大，但用于調試比較方便。
- ext-all.js – 包含整個框架并經過最小化處理，不支持調試，沒有注釋，產品環境中請使用該文件。
- ext-debug.js – 該文件提供最佳的調試體驗，但也是最慢的。
- ext.js – ext-debug.js 經過壓縮處理后的版本
App
app.js 文件是你定制代碼的入口，你可以將你定制的代碼放在 src 和 assets 文件夾中。在我的定制代碼中，我展示了一些有趣的東西：
Components
我沒有對 Sencha 組件庫進行深入研究，但有很多好看的組件，包括：Accessibility, Grids, Charts, Tabs, Windows, Trees, Layout, Managers, Drawing, Drag and Drop, Toolbars, Menus, ComboBox, DataView, Forms, MVC 等等，這里有一個 ViewPort 的簡單例子：
testSomeUI: function() {Ext.create('Ext.container.Viewport', {
name : "viewPort2",
layout: 'fit',
items: [
{
title: 'My Viewport',
html : 'Hello World!'
}
]
});
},
Classpathing
Sencha 提供一種很好的方式將代碼分開成為單獨的類，并可將類存放于包中。所有包的根就是源碼根路徑。Classes/packages 可幫助你組織和調試（在斷點位置可更清晰的顯示問題所在）
首先，我指定了一個或者多個 classpaths:
Ext.Loader.setConfig({
enabled : true,
paths : {
com : "src/com"
}
});
然后在主 app 中加載并使用某個類：
// SUPER CLASS
var myBeer = Ext.create('com.rmc.projects.helloworld.Beer', 'Budweiser');
console.log ("myBeer.brandName: " + myBeer.brandName );
console.log (myBeer.drink());
// CHILD CLASS
var myLightBeer = Ext.create('com.rmc.projects.helloworld.LightBeer', 'BudLight');
console.log ("myLightBeer.brandName: " +myLightBeer.brandName );
console.log (myLightBeer.drink());
// MIXIN
// Because of 'MixinCheers.js' we can call 'cheers()'
myLightBeer.cheers();
我閱讀了文檔，知道這被稱為“動態加載”類，可在需要的時候加載。由于 JavaScript 原生是不支持面向對象開發，但是在 Sencha 中卻工作得很好：
這里是一個超類：
Ext.define('com.rmc.projects.helloworld.Beer', {
// --------------------------------------
// Properties
// --------------------------------------
brandName: 'Unknown',
calories: 0,
// --------------------------------------
// Constructor
// --------------------------------------
constructor: function(brandName) {
// SUPER
// EVENTS
// VARIABLES
// PROPERTIES
this.calories = 200;
if (brandName) {
this.brandName = brandName;
}
// METHODS
// RETURN
return this;
},
// --------------------------------------
// Methods
// --------------------------------------
drink: function() {
return "The beer '"+ this.brandName+"' was drank. Calories : " + this.calories;
}
});
然后是一個之類，擴展了超類：
Ext.define('com.rmc.projects.helloworld.LightBeer', {
// --------------------------------------
// Properties
// --------------------------------------
extend : "com.rmc.projects.helloworld.Beer",
mixins: {
ch: 'com.rmc.projects.helloworld.MixinCheers'
},
// --------------------------------------
// Constructor
// --------------------------------------
constructor: function(brandName) {
// SUPER
this.superclass.constructor.apply(this, [brandName]);
// EVENTS
// VARIABLES
// PROPERTIES
this.calories = 100;
// METHODS
// RETURN
return this;
},
// --------------------------------------
// Methods
// --------------------------------------
});
這里是一個 mixin 類，子類中使用：
Ext.define('com.rmc.projects.helloworld.MixinCheers', {
// --------------------------------------
// Properties
// --------------------------------------
// --------------------------------------
// Constructor
// --------------------------------------
// --------------------------------------
// Methods
// --------------------------------------
cheers: function() {
console.log ("Cheers!");
},
});
Ext JS MVC 模板
如果你喜歡上面的 Hello world 例子，這里有一些更高級的東西。我的靈感來自于 Robotlegs MVC Templates （這是我為 AS3/Flex 創建的項目），今天我們使用同樣的思路創建一個 Ext JS MVC 模板。
模板的目的是為了創建一個簡單的、空的 MVC 應用，這個可以作為你新的 Ext JS 項目的基準。MVC 是 web 開發廣泛使用的設計模式，這里的應用提供一個簡單的 UI 包含 load 和 clear 按鈕，load 按鈕從 model 中加載數據并在 view 中顯示，這是一個很簡單的例子，但足以演示 Sencha Ext JS 中一些關鍵的概念。
Figure 1
Figure 2
結論
我很高興有 Sencha Ext JS 這樣的東西，該框架為 JavaScript 增加了更強大的功能，其樣式系統也非常的靈活和可靠，組件看起來都很棒。