手動建立 Hello World 應用程式
讓我們開始使用 ExtJS 來構建一個簡單的 Web 應用程式。
我們將建立一個簡單的 Web 應用程式，它只有一個物理頁面（aspx / html）。每個 ExtJS 應用程式至少包含一個 HTML 和一個 JavaScript 檔案 - 通常是 index.html 和 app.js.
檔案 index.html 或你的預設頁面將包含對 ExtJS 的 CSS 和 JavaScript 程式碼的引用，以及包含應用程式程式碼的 app.js 檔案（基本上是 Web 應用程式的起點）。
讓我們建立一個使用 ExtJS 庫元件的簡單 Web 應用程式：
第 1 步：建立一個空的 Web 應用程式
如截圖所示，我建立了一個空的 Web 應用程式。為簡單起見，你可以在所選的編輯器或 IDE 中使用任何 Web 應用程式專案。 https://i.stack.imgur.com/cJMlb.jpg
第 2 步：新增預設網頁
如果你已經建立了一個空 Web 應用程式，那麼我們需要包含一個網頁，該網頁將成為我們應用程式的起始頁面。
https://i.stack.imgur.com/m6moG.jpg
第 3 步：將 Ext Js 引用新增到 Default.aspx
此步驟顯示了我們如何使用 extJS 庫。如 Default.aspx 中的螢幕截圖所示，我剛剛引用了 3 個檔案：
- EXT-all.js
- EXT-all.css
- app.js
Sencha 與全球內容網路 CacheFly 合作，為 ExtJS 框架提供免費的 CDN 託管。在這個示例中，我使用了 Ext 的 CDN 庫，但是我們可以在專案目錄中使用相同的檔案（ext-all.js 和 ext-all.css），或者在 CDN 不可用時使用備份。
通過引用 app.js，它將被載入到瀏覽器中，它將成為我們應用程式的起點。
除了這些檔案，我們還有一個佔位符，用於呈現 UI。在此示例中，我們有一個 id 為 whitespace 的 div，稍後我們將使用它來呈現 UI。
https://i.stack.imgur.com/qJ4vd.jpg
<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script>
<link rel="stylesheet" type="text/css"
href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>
<script src="app/app.js"></script>
第 4 步：在你的 Web 專案中新增 app 資料夾和 app.js.
ExtJS 為我們提供了一種管理 MVC 模式中的程式碼的方法。如截圖所示，我們有一個 ExtJS 應用程式的容器資料夾，在本例中為 app。此資料夾將包含拆分為各種資料夾的所有應用程式程式碼，即模型，檢視，控制器，儲存等。目前，它只有 app.js 檔案。
https://i.stack.imgur.com/SY8gQ.jpg
第 5 步：在 app.js 中編寫程式碼
App.js 是我們申請的起點; 對於此示例，我剛剛使用了啟動應用程式所需的最低配置。
Ext.application 代表一個 ExtJS 應用程式，它可以執行多項操作。它建立了名稱配置中提供的全域性變數SenchaApp，所有應用程式類（模型，檢視，控制器，儲存）都將駐留在單個名稱空間中。Launch 是一個在所有應用程式準備好後自動呼叫的函式（所有類都正確載入）。
在此示例中，我們將建立一個具有一些配置的 Panel，並將其呈現在我們在 Default.aspx 中提供的佔位符上。
Ext.application({
name: 'SenchaApp',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'Sencha App',
width: 300,
height: 300,
bodyPadding:10,
renderTo: 'whitespace',
html:'Hello World'
});
}
});
輸出截圖
使用 Default.aspx 作為啟動頁面執行此 Web 應用程式時，瀏覽器中將顯示以下視窗。
