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


你可能感兴趣的:(java,Web,cmd,dynamic,ExtJs,sencha,ExtJs6)