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 的升級
- …
這里不展開說明,大家可以自行谷歌或者查看官方文檔。