1、手把手教你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 intall

安裝后,需要重啟你的終端(命令行面板),才可以啟用 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

sencha generate app

完成之后,/xxx/xxx/extjs5demo 這個目錄下,就會有一個 名為 fivedemo 的 ExtJS 5 項目。

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/ 訪問這個項目了

ExtJS 5 原始項目 DEMO

sencha web 支持 -port 參數來設定端口,如:

Sencha Web port

Last. Sencha Cmd 的其它運用

  • 使用 Sencha Cmd 的一個重要的原因是它方便項目的打包,使用 sencha app build 就可以打包(代碼要規范)
  • ExtJS Theming 離不開 Sencha Cmd
  • ExtJS SDK 的升級

這里不展開說明,大家可以自行谷歌或者查看官方文檔。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM