专栏首页建站教程基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)
原创

基于SenchaCmd搭建ExtJS 6.2版本开发环境(图文教程)

因为各种原因,需要在extjs项目中开发点新功能,由于之前没好好接触过extjs,我前端领域主要学的是React技术栈。所以开始找资料搭建ExtJs运行环境。

说一段小插曲,由于看见extjs项目下有index.html文件,于是,在webstorm工程中用浏览器打开index.html文件,试图把项目跑起来,在浏览器中打开index.html的时候,是一片空白,活生生的打脸了。我潜意识的意识到,跑项目肯定需要搭建extjs的开发环境的。然而我也不知道需要用什么工具来搭建,没有关键字,搜索百度也是徒劳。我在项目代码中偶然看见了SenchaCmd这个关键字,于是百度下来,就能顺利找到资料了,知道要安装好SenchaCmd。

blob.jpg

大家需要学习ExtJS可以上中文网站 http://extjs.org.cn/ 看这本书:《ExtJS 6.2实战》

安装软件

安装SenchaCmd-6.7.0.63-windows-64bit

  • 安装Cmd: SenchaCmd-6.7.0.63-windows-64bit

安装ext-6.2.0-gpl

  • 安装SDK:ext-6.2.0-gpl
blob.jpg

安装步骤

解压安装压缩包

解压SenchaCmd-6.7.0.63-windows-64bit和ext-6.2.0-gpl

安装SenchaCmd-6.7.0.63-windows-64bit,记住安装位置目录,我这里安装的目录地址是

C:\Users\Arison\bin\Sencha\Cmd

window cmd切换到C:\Users\Arison\bin\Sencha\Cmd目录下,执行命令

sencha help

如果显示如图所示,就代表安装成功

blob.jpg

配置系统环境变量

为什么要配置系统环境变量呢?为了接下来运行项目的命令不会报错。

运行项目的命令:sencha app watch

新建系统变量:EXTJS_CMD_HOME

路径就是:C:\Users\Arison\bin\Sencha\Cmd

blob.jpg

编辑系统变量Path

blob.jpg

新建环境变量:%EXTJS_CMD_HOME%

blob.jpg

新建ExtJS项目

在路径 C:\Users\Arison\bin\Sencha\Cmd下创建项目:

sencha -sdk [解压后的ext-6.2.0的位置] generate app [项目名称] [项目地址] 

创建项目 extjsDemo

extjsDemo是我随便取的项目名。

sencha -sdk C:\ExtJs\ext-6.2.0-gpl\ext-6.2.0  generate app extjsDemo C:\Project\ext

运行ExtJS项目

项目路径执行:

sencha app watch

在你创建的ExtJs项目目录下执行命令:

默认访问路径是:http://localhost:1841 如果你执行了多个extjs项目,端口会随机变化!

blob.jpg

项目运行如下:

blob.jpg

然后我在sdk自带的项目目录下ext-6.2.0-gpl\ext-6.2.0\templates\admin-dashboard

执行命令 sencha app watch 运行sdk自带的demo工程

然后根据命令行提示,找到访问路径:http://localhost:57346

blob.jpg

这是Ext JS Examples项目,项目路径位于:

ext SDK ext-6.2.0目录下的templates下的admin-dashboard

C:\ExtJs\ext-6.2.0-gpl\ext-6.2.0\templates\admin-dashboard
blob.jpg

项目目录结构

用WebStorm打开项目,项目目录文件结构如下:

blob.jpg

原文地址:http://cloud.yundashi168.com/archives/708

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java微服务框架全方位对比(Dubbo 和 Spring Cloud?)

    微服务(Microservices)是一种架构风格,一个大型复杂软件应用由一个或多个微服务组成。系统中的各个微服务可被独立部署,各个微服务之间是松耦合的。每个微...

    聚优云惠
  • 微信公众号支付失败问题-微信支付提示 调用支付JSAPI缺少参数:appId

    鉴于去年做过微信app支付,小程序支付,支付宝app支付,云闪付app支付等方面的功能和研究。最近要完成一个在微信公众号支付的场景。其中遇到了一个坑,坑了我足足...

    聚优云惠
  • Docker学习教程笔记第二篇:Docker从入门到熟练使用详解

    Docker的基础是Linux容器(LXC)等技术,(LXC系统提供工具来管理容器,具有先进的网络和存储支持,还有最小容器操作系统模版的广泛选择)。

    聚优云惠
  • FFmpeg使用手册 - ffplay 的常用命令

    在编译FFmpeg源代码时,如果系统中包含了SDL-1.2版本时,会默认将ffplay编译生成出来,如果不包含SDL-1.2或者版本不是SDL-1.2时,无...

    用户3765803
  • C++异常处理的开销

    C++异常是C++有别于C的一大特性 ,异常处理机制给开发人员处理程序中可能出现的意外错误带来了极大的方便,但为了实现异常,编译器会引入额外的数据结构与处理机制...

    Dabelv
  • ConcurrentHashMap 原理解析(JDK1.8)

    java404
  • DiskDB,一个不用网的数据库

    作为程序员,偶尔会冒出些新奇的想法,又不希望实现起来太麻烦,比如说做一个单机版的客户管理系统。

    tonglei0429
  • 将文件字节输出流写入到文本中

    1 package DEMO; 2 3 import java.io.File; 4 import java.io.FileOutputStream;...

    Gxjun
  • 与其砸掉ERP质疑SaaS未来,不如看巨头们在做什么?

    T客汇官网:tikehui.com 撰文 | 人称T客 “SaaS在中国能做起来吗?” 前不久这句话来自于本土管理软件公司的一位高管,面对这个问题我不知道该说如...

    人称T客
  • Shell条件表达式的正则匹配

    Shell编程中,我们可以使用双中括号运算符[[]]和=~来判断字符串是否匹配给定的正则表达式,例如匹配以lvlv结尾的字符串:

    Dabelv

扫码关注云+社区

领取腾讯云代金券