在有限的時間中，要學會一個前端框架不容易，也沒有一個框架是萬能的，但總要有個開始，筆者在進幾年一直在 extjs 的世界打滾，已有三四年的經驗，最近負責的專案除了使用 extjs，後端使用 grails，發現好處多多，就開發過程中的經驗與大家分享，從實際的例子還有兩個框架遇到得整合問題一一介紹
在使用 sencha architect 開發時，我們很難對 js 檔進行檔案修改，基本上所有的檔案調整，都是透過 architect 存檔時一並寫入對應的原始檔案，其中關於每個 js 的原始檔放於 EXTJS\_HOME/metadata，但一旦你進入該資料夾檢視相關的檔案，可以發現他跟一般的 js 有出入，所以你也不要想再裡面進行編輯，有可能會造成整個專案運作異常。

除此之外在專案裡面，有兩個設定檔為 architect 所產生分別是 .architect 以及 projectName.xds，其中 .architect 會自動產生，但 xds 就不好搞了，如果你是一個人開發，還不致於發生問題，但若是多人開發，再加上有使用版本控管，問題就來了；xds 檔所記錄的似乎是在 architect 建立 extjs 元件之間的關聯，因此若是多人開發不同的功能，並且在版本控管的情況下，該檔案很容易有衝突；而在編修衝突時，很多時候會不知道該如何下手，因為代表元件的相關檔案識別皆已編碼，只有 IDE 才看的懂對應的關係，如果 xds 的內容無關緊要或是會重新產生那就算了，偏偏 xds 檔在 architect 是主要專案的進入點，因此如果處理的不好，很容易造成專案運作異常。

就筆者的經驗，一般 extjs 元件的建立或修改基本上都比較不會有問題，最容易產生異常的通常是在 application.js 這個檔案，在 extjs 的世界裡，該檔案定義了一個應用程式在運行時，需要載入 extjs 中 mvc 各個物件，為什麼他很容易出現問題呢？主要因為在使用 architect 時，當你新增元件時，IDE 將會自動將你新增的元件載入到 application.js 中，多人開發情形下，Application.js 就會是所有人的交集，不然照理分別開發新功能所新增的元件皆不同不應該會頻繁造成衝突，而因為 application.js 的多人異動，造成再 xds 中對 application.js 的檔案識別常常會有不同的代表造成衝突，一旦 xds 衝突一發生，編修時一不小心讓 IDE 不認得 Application.js，就會造成 Application.js 無法被識別，導致 IDE 認為沒有建立 Application.js，則以最原始的狀態 Application.js 作為預設，也就是沒有任何元件載入，導致於系統運作異常。

知道問題發生的原因，那上述問題怎麼解？其實只要改變我們建立物件的習慣即可，在說明作法前，需要先讓大家了解一下 extjs 如何載入相關 js 檔的，在 extjs 中，不管你是宣告 mvc 其中的任一類型的元件，或是繼承 extjs 原生的類別，很多時候我們會使用 require 這個宣告，來告訴 extjs 該元件要運作需要哪些類別配合，一旦你有定義 require，當元件運行時，extjs 就會自動將相關 require 的類別進行載入，這是個很方便的特性，幫助我們省去在 html 中載入所需 js 的麻煩，進一步的減少元件忘記或是載入錯誤。

前面有提到 application.js 是多人開發時的交集，一個方法是減少交集的產生，而我們該如何減少交集呢？可以用到 extjs 自動載入元件的特性，將我們需要用到的元件皆定義在 controller 底下，而在 application.js 只載入 controller 相關元件，如此就可以減少 application.js 變動，即使真的不幸還是造成 application.js 異常，我們知道只要將所有 controller 載入即可恢復，除了避免多人開發時造成程式碼衝突，將需要的物件定義在 controller 裡面也才是較正確的方式，完善的定義該功能再運行時所需的元件，可以帶來更易於維護的優點，另外在使用 architect 時，一旦你將相關物件加入 controller 時，IDE 也會問你要不要將設定在 application 載入的元件移除，如此一來元件所責任的功能也會更加清楚。

上述的解法，是筆者根據經驗認為比較優的解法，如果讀者有更好的想法也歡迎分享，希望可以讓有同樣困擾的人節省一點時間。

最後綜合上述的內容，整理出使用 architect 開發需要注意的重點如下：

1. .sencha 檔案可以不用加入版本控管，一旦你使用 architect 進行存檔時，該檔案都會重新產生，衝突情形也可以直接覆蓋最新版本
2. xds 檔，很多時候都會有衝突，更新程式碼有衝突時，編修完成後記得開啟 architect 確認 application.js 中掛載的元件是否還好好的在那邊。
3. 因為 architect 在編輯過程中不會動態載入你的元件，因此一旦你在 IDE 開啟中的狀態要進行程式碼更新，建議先對專案進行存檔，並且程式碼一旦更新為最新的，記得將 IDE 重啟以便重新載入所有更新過程式碼。
4. 建立 extjs 元件時，不要懶惰讓 IDE 自行將元件加入到 application.js 可以的話建立該功能所需要的 controller 將其歸屬進去，整個功能架構也會更加清楚。
5. 在 application 中，原則上只管理需要載入的 controller 即可，一旦編修衝突不順利，可以很快的進行復原。

Ext JS 教學內容由思創軟體提供，共同作者 @lyhcode 與 @smlsun 目前在校園及企業從事 JavaScript（含 Node.js, Ext JS）與 Java（含 Groovy, Grails, Gradle） 教育訓練及顧問工作。