剛剛開始接觸ExtJs的小白，首先先摸一下“敵人” 的底，然後是下載，最後把其配置入你的專案中，本文使用的是ext-6.6.0-trial，下載地址：https://www.sencha.com/products/extjs/evaluate/

一、什麼是ExtJs

ExtJs是用JavaScript寫的，主要用於建立前端使用者介面，是一個與後臺技術無關的前端JS框架，可用於.Net、Java、Php等應用中，其基於MVC/MVVM架構，突出特性為：

1. 可定製的UI小部件與豐富的UI集合，如網格，樞軸網格，表單，圖表，樹木。
2. 新版本與舊版本的程式碼相容性。
3. 靈活的佈局管理器有助於組織跨多個瀏覽器，裝置和螢幕大小的資料和內容顯示。
4. 高階資料包將UI小部件與資料層分離。 資料包允許客戶端使用高度功能的模型收集資料，這些模型支援排序和過濾等功能。
5. 它是協議不可知的，並且可以從任何後端源訪問資料。
6. 可定製的主題Ext JS視窗小部件提供了跨平臺一致的多個現成主題。

二、ExtJs下載

下載完後你得到一個壓縮包，以6.6.0為例，解壓後得到的目錄為：

一開始看到這樣有點蒙，東西真多，但實際上你要引入專案用到的並不多（看你專案需求），關鍵的幾個：

1、build下的ext.js

2、build下的ext-all.js或ext-all-debug.js（debug好像會報錯時給的資訊更多）

3、resources資料夾（在我看來這個6.6.0版本下的resources資料夾沒有半點作用，但是可能對於其他的版本里面會有你需要到的東西）

4、你需要的樣式主題，在build/classic下，有很多，只需要一個你想要的主題加入你的專案即可：

三、配置入專案

Java的專案，用了springboot+maven，別的專案自己看著怎麼配置吧，估計都是差不多的了

直接上圖吧，注意標紅色的地方，maven專案的結構如果有不清楚的可以自己去百度查查了，然後在static資料夾下，我建立了js/extjs6.6.0資料夾，把用到的Extjs相關 - 上面提到的那些必要檔案和資料夾放入專案中。

四、測試可以使用ExtJs

1、ExtJs樣式css

<link rel="stylesheet" type="text/css" th:href="@{/static/js/extjs6.6.0/resources/theme-triton/resources/theme-triton-all.css}" />

2、ExtJs核心檔案

<script th:src="@{/static/js/extjs6.6.0/ext.js}"></script>
<script th:src="@{/static/js/extjs6.6.0/ext-all.js}"></script>
<script  type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

3、ExtJs最基礎最簡單的也是彈框，我們在專案中寫個script就好，等Ext準備好後顯示一個彈框，程式碼如下：

Ext.onReady(function () {
    console.log("extjs準備完畢");
    extjsMessage();

 });
        
function extjsMessage(){
	var content = 'wellcom-extjs';
	Ext.MessageBox.alert('extjs', content);
}

到此我們就配置完了，可以愉快的和ExtJs玩耍了。