extjs6整合到web項目中

       最近有一個項目須要應用extjs做爲前端界面，所以研究了一下如何將extjs 6引入到項目中。如下是操做步驟

      extjs6下載地址

         extjs 6有gpl版本的，下載地址https://www.sencha.com/legal/gpl/

      sencha cmd 搭建extjs 6環境

• 安裝sencha cmd
• 下載extjs6 並解壓
  
• cmd 進入到extjs6的解壓目錄 執行sencha應用程序生成命令

 

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

 

• 啓動sencha 容器

 

      sencha web -port 1841 start

           sencha容器默認的訪問地址爲http://localhost:1841。若是使用默認端口能夠不寫-port參數，若是是其餘端口必須帶上-port參數,

           若是訪問的頁面是文件的目錄，則須要先進行sencha app build 而後再啓動sencha的web容器

 

• sencha cmd其餘指令
  

 

       sencha app build
       sencha app watch
       sencha app refresh

 

      extjs6本地化

        extjs6的本地化是在app.json文件中配置的，不須要直接引入本地化的js文件。本地化參數配置在classisc的參數中，添加如下配置節點參數。

    //如下是新增的添加本地化包的代碼        
    "requires" : [
        "locale"
    ],
    "locale": "zh_CN"

        配置完畢後須要使用sencha cmd 經過sencha app build從新構建extjs 6才能生效。

 

      extjs 目錄說明

        extjs經過sencha 構建解壓後的目錄結構說明

     app                extjs的開發源碼目錄，包含應用的模型、視圖、控制器及存儲定義目錄。
     - -     controller 控制器   
     - -     model      模型
     - -     store      數據
     - -     view       視圖
     build              extjs和源碼壓縮和優化後的可發佈的目錄
     ext                extjs的sdk包括源代碼和樣式
     app.js             應用主入口javascript文件。
     app.json           js配置文件
     bootstrap.js       系統初始化和樣式類加載文件
     index.html         應用HTML入口文件
     packager.json      用於Sencha Cmd 建立打包應用時的配置文件
     resources          包含應用所需的CSS和圖片資源。

 

         web項目中須要的extjs文件和目錄

1.   extjs-all.js
2. extjs-base.js
3. zoomkey
4. resource
5. plugins

     extjs引入到web項目中

       將sencha 生成的extjs目錄拷貝到web項目中。

     參考資料

         http://www.qeefee.com/article/000338
         http://docs.sencha.com/extjs/6.0/getting_started/getting_started.html
         http://lzw.me/a/sencha-touch-getting-started.html

         http://blog.csdn.net/tianxiaode/article/details/46744591

         http://extjs-doc-cn.github.io/ext4api/#!/api/Ext.data.proxy.Rest