一、手把手教你Extjs5(一)搭建ExtJS5環境

Ext JS 5 的主要特性包括：

• 新的數據綁定方式
• 新增支持 MVVM 模式，而且依然支持 MVC 模式
• 對手持設備更友好，針對觸屏設備進行優化
• 新的主題 Crisp / Neptune Touch（針對觸屏優化）
• Routing / URI
• 拋棄對超舊瀏覽器的支持，目前支持 IE 8+ / Safari 6+ / Opera 12+ /Firefox / Chrome / Safari iOS 6+ / Chrome Android 4.1+ / IE 10+ Win 8
• 拋棄舊瀏覽器帶來的性能提高
• Widgets
• 新的組件（如 Tagfield 等）

Sencha Cmd 5 with ExtJS 5 的注意事項

下面我先來分享一下我在使用 Sencha Cmd 5 with ExtJS 5 時候遇到的須要注意的地方：

• 如題所示，ExtJS 5 須要 Sencha CMD 5 ，再也不支持 Sencha Cmd 4.x
• Sencha Cmd v5.0.0116 有 BUG ，使用的時候會遇到 Ext.Factory.controller is undefined 的問題
• sencha upgrade 命令還沒準備好，沒法安裝最新的 Sencha Cmd v5.0.0.160，而是安裝 5.0.0116

Sencha CMD 5 with ExtJS 5

1. 下載並安裝 Sencha Cmd

sencha upgrade 沒法保證最新的版本（小版本）。

因此請到官方網站： http://www.sencha.com/products/sencha-cmd/download 下載最新版本的 Sencha Cmd，並執行安裝。

安裝後，須要重啓你的終端（命令行面板），才能夠啓用 Sencha Cmd 5

2. 下載並解壓 ExtJS 5 SDK

請到官方網站下載最新的 SDK ：https://www.sencha.com/products/extjs/

下載完解壓後會獲得一個 ext-5.0.0 的包（文件夾形式）

3. 使用 sencha generate app 命令生成 ExtJS 項目環境

需求：安裝 Sencha Cmd 5 \ Ruby 1.9.3 \ ExtJS SDK ( Ruby 1.9.3 各平臺的安裝方式請自行谷歌，Sencha Cmd 4.x 的時候僅支持 Ruby 1.9.3 ，5.x 未驗證是否支持其它版本，但支持 5.x ）

打開終端（Windows 下是 CMD），而後運行如下命令：

sencha -sdk {pathToSDK} generate app {appName} {pathToProject}

其中 pathtoSDK 是 ExtJS SDK 的路徑，appName 是 ExtJS APP 的 app name ，pathToProject 是要生成後要保存的路徑 
舉個例子：

sencha -sdk /Users/lingyired/Documents/framework/ext-5.0.0 generate app fivedemo /Users/lingyired/Documents/extjs/fivedemo

完成以後，/xxx/xxx/extjs5demo 這個目錄下，就會有一個 名爲 fivedemo 的 ExtJS 5 項目。

4. 如何訪問項目

因爲 ExtJS 項目使用 XMLHttpRequest 來動態加載不一樣的 JS 文件，因此項目沒法支持直接打開靜態的 HTML ，若是你直接打開，可能會獲得相似的報錯：

*XMLHttpRequest cannot load file:xxx/fivedemo/bootstrap.json. Cross origin requests are only supported for HTTP. *

也就是說，你想要訪問這個 demo 項目，就須要一個小型的服務器環境。

而 Sencha Cmd 是支持這個服務的。

先在終端進入到項目的目錄：

cd /Users/lingyired/Documents/extjs/fivedemo

而後運行：

sencha web start

而後就能夠訪問 http://localhost:1841/ 訪問這個項目了

sencha web 支持 -port 參數來設定端口，如：

Last. Sencha Cmd 的其它運用

• 使用 Sencha Cmd 的一個重要的緣由是它方便項目的打包，使用 sencha app build 就能夠打包（代碼要規範）
• ExtJS Theming 離不開 Sencha Cmd
• ExtJS SDK 的升級
• …

這裏不展開說明，你們能夠自行谷歌或者查看官方文檔。