由于工作中可能会用到ExtJS,而且之前从未接触过,于是找资料开始搭建ExtJS,整理下构建步骤,用作记录。
参考文档地址:
https://cloud.tencent.com/developer/article/146124
官方网站:
https://www.sencha.com
在线文档:
http://docs.sencha.com/extjs/6.5.1/index.html
官方论坛:
https://www.sencha.com/forum/
在线演示:
http://examples.sencha.com/extjs/6.5.1/examples
一、准备工作
1.安装Cmd: SenchaCmd-6.7.0.63-windows-64bit
2.安装SDK:ext-6.2.0-gpl
Sdk 下载:https://www.sencha.com/products/extjs/evaluate/
Cmd 下载:https://www.sencha.com/products/extjs/cmd-download/
二、安装步骤
1.解压安装压缩包
SenchaCmd-6.7.0.63-windows-64bit
ext-6.2.0-gpl
2.安装SenchaCmd-6.7.0.63-windows-64bit,记住安装位置目录,我这里安装的目录地址是
D:\Users\Administrator\bin\Sencha\Cmd\7.0.0.40
3.window cmd切换到上述目录下,执行命令
sencha help
如果显示如图所示,就代表安装成功
三、配置环境变量
为什么要配置系统环境变量呢?为了接下来运行项目的命令不会报错。
运行项目的命令:sencha app watch
新建系统变量:EXTJS_CMD_HOME
路径就是:D:\Users\Administrator\bin\Sencha\Cmd\7.0.0.40
编辑系统变量Path
四、新建ExtJS项目
在路径 D:\Users\Administrator\bin\Sencha\Cmd\7.0.0.40下创建项目:
sencha -sdk [解压后的ext-6.2.0的位置] generate app [项目名称] [项目地址]
项目名称为ExtJSDemo
sencha -sdk F:\ExtJS\ext-6.2.0 generate app ExtJSDemo F:\ExtJSDemo
注:此处ext-6.2.0目录结构如下,此处因为解压时目录叠加报错。
如图所示,即为成功:
五、运行ExtJS项目
在你创建的ExtJs项目目录下执行命令:
sencha app watch
默认访问路径是:http://localhost:1841 如果你执行了多个extjs项目,端口会随机变化!
项目运行测试:
如下是ExtJS自带的demo工程
F:\ExtJS\ext-6.2.0\templates\admin-dashboard
运行命令: sencha app watch
运行结果:
项目目录结构: