ExtJs 思維導圖

標籤：hid   set   lips   請求   image   oca   服務   介面   檔案   

 

 

搭建環境：

 

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 或 Firefox 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 思維導圖