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