sencha ext js 6 快速入門(必看)

sencha ext js 6 快速入門(必看)

Sencha Ext JS號稱是目前世界上最先進和最強大的、支援多平臺多裝置的JavaScript應用程式開發框架。首先看一下Ext JS的發展簡史。

1 Ext JS發展簡史

1.YUI-Ext的作者Jack Slocum(傑克.斯洛克姆)打算對基於BSD協議的Yahoo User Interface (YUI)庫進行自定義的擴充套件,但後來一度風頭蓋過其父輩YUI;

2.在2006年底,YUI-Ext被簡化為Ext,反映了它作為一個框架的成熟和獨立。該公司成立於2007年初,Ext現在為雙執照,使用LGPL和一個商業執照;

3.在2007年4月1日,釋出1.0正式版,現在的版本為6.0;

4.從4.0開始引入了MVC/MVVM風格的應用架構和SCSS;

5.從5.0開始,不再支援老舊瀏覽器,如IE5、6、7等;

6.從6.0開始,Sencha Touch和ExtJS合二為一,標誌著使用者可以開發既能支援傳統桌面、又支援平板或手機的應用

2 開發準備

1. 首先需要下載Ext JS SDK,下載ExtJS 6.0 SDK GPL正式版  https://www.sencha.com/legal/gpl/ ,如果需要商業應用,請下載商業版。解壓到D盤。

2. 下載Sencha Tool ,假設你的系統裡沒有安裝了JRE7 ,請下載帶JRE版本的Sencha Tool,併成功安裝。

3 專案建立

1. 用管理員開啟命令列,用 cd /d d:\ext-6.0.0 進入SDK目錄

2. 用 sencha -sdk ./ext-6.0.0 generate app -classic cmpwebui  ./CMPWebUI 命令建立基於ext-6.0.0版本的名為cmpwebui的app,專案路徑為./CMPWebUI.

在目錄D:\ext-6.0.0下生成CMPWebUI專案檔案,檔案結構如下:

      3. 進入專案檔案下,用 sencha app watch 專案預覽,埠號預設為1841,如果當前已有,則會遞增,這裡埠為1842

     在瀏覽器中輸入http://localhost:1842/進行預覽,和我一開始期望的不同,裡面包含官方的例子,可以點選【view the Example】進行檢視。

那麼自己建立的專案在哪呢?可以輸入http://localhost:1842/cmpwebui/ 進行檢視

 4. 專案釋出,用sencha app build進行編譯

 

編譯完成後,可以在ext-6.0.0下的build檔案下看到此釋出的專案。

 5. IIS專案釋出,這裡需要注意配置IIS來解析JSON,否則網站無法預覽、

想要執行其實很簡單,只要能讓*.json的檔案能夠被Web伺服器解析即可,這裡以IIS7為例說明。

1)安裝IIS7的ASP支援

控制面板–>程式和功能–>開啟和關閉Windows功能–>角色–>新增角色服務–>應用程式開發–>選擇ASP

2)給預設網站新增MIME型別

新增–>副檔名為json,MIME型別為text/json(或application/x-javascript也可以)

3)給預設網站安裝指令碼對映

處理程式對映–>新增指令碼對映。請求路徑為*.json,可執行檔案為%windir%\system32\inetsrv\asp.dll,名稱為json

4)在預設文件中新增index.html

5)在預設網站下建立SenchaTouch應用程式,IIS6下稱作虛擬目錄。

6)使用Chome預覽(IE不支援)

至此配置完成後,可以看到資料夾下多了 一個web.config

再重新整理網頁即可:

以上這篇sencha ext js 6 快速入門(必看)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援指令碼之家。