搭建環境：

1. 建tomcat , eclipse
2. 復制 Extjs 到 項目的 webcontent下
（建議用自己一個熟悉的Extjs版本，我用Ext JS 4.2）， 備份一個ext目錄，新項目直接復制。

啟用ExtJs

1. 在html / head裏 包含主要的幾個js

<link rel="stylesheet" href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/ext-all-debug.js" ></script>
<script type="text/javascript" src="./ext/locale/ext-lang-zh_CN.js" charset="utf-8"></script>

2.引用你的 js

<script type="text/javascript" src="./main.js" ></script>

一切從main.js 裏的 Ext.onReady(function() {} )

開始

3. 示例
Ext.onReady(function() {
Ext.Msg.alert(‘提示‘, ‘逗號分隔參數列表‘); //這種方式非常常見的
});

調試建議：

1. 準備 瀏覽器 chrome 或 火狐 f12鍵 可以看 js 的運行情況

2. 在代碼關鍵處 加
console.log( ‘initData ‘ );
alert()
這樣可以在調試的時候發現js運行的情況。
建議用 log, 輸出到瀏覽器 f12的一個窗口

ExtJs 幾大要素：

一個程序（頁面），可以分三個要素： 界面UI, 數據， 按鈕事件（function）.
用專業的屬於叫 VMC。
不管用一個文件實現還是，三個文件實現。腦子裏有這個邏輯概念就好。 在代碼編寫觀眾中， 有意識的，區分處理。這樣整個程序框架比較好維護好閱讀。

我個人整理了一個思路： 僅做參考
/*
* 本頁面分 三個部分
*
* 第一部分數據類的，比如model 定義 store 定義 界面內的使用變量定義
*
* 第二部分就是畫界面的部分， 界面定義及繪畫過程該部分完成，代碼裏有的按鈕事件 如果涉及到業務處理超過 5 行，單獨形成函數處理
*
* 第三部分就是業務處理， 所有業務相關的處理函數都獨立處理
*
* 編碼規範：
* 關鍵panel ,grid ,form 需要命名，格式 id命名為 id_panelXXXXX
* Store 命名 storeXxxxx ,id 為id_storeXxxxx
* 業務函數命名 fnAddXxxxx fnEditXxxxx, 分支函數 用 handleXxxxx 或 handleXxxxxAction
*
*/

/*
* 經典增刪改查界面包含如下 主界面 panelTcpMonitor = toolbar + gird 增加按鈕 會顯示增加界面 windows +
* panel + 小組件 修改按鈕 會顯示增加界面 windows + panel + 小組件 刪除按鈕 無界面 刷新按鈕 無界面
*
* 界面創建過程： 1.創建主界面 panelTcpMonitor， 後期用hide + show控制， panelTcpMonitor
* 放置在panelMain裏 2.點擊增加，創建 panel及裏面的小組件， 把panel放置在 windows裏彈出 3.點擊修改，創建
* panel及裏面的小組件，需要把選擇的數據帶入， 把panel放置在 windows裏彈出 4.刪除，刷新略過
*
*/

/*
* 經典增刪改查頁面業務控制 0.標準化數據提交及標準化數據返回 與後臺交互會很多，接口標準化很有必要，這個標準化仁者見仁 交互方式： 向服務器發送： a.用
* http的url + cmd = 1001 做為唯一操作編碼，例如：localhost:8080/Monitor/Server?cmd=1001
* b.數據內容采用 json , 下附 A1 服務器下發數據： a. 數據格式json, 格式下附A2
*
* 1.刷新 store.reload()
* 2.讀取表格數據操作，用store發送請求，並顯示
* 3.增加記錄， 定義 新的對象， NewWebMon， 轉換成json字串， 然後做為請求的內容向後臺發送
* 4.編輯記錄， 定義 新的對象， NewWebMon， 轉換成json字串， 然後做為請求的內容向後臺發送
* 5.刪除記錄， 直接轉換 record --> json ， 然後做為請求的內容向後臺發送,後臺根據id刪除數據
*

ExtJs 思維導圖