Ext JS开发基本环境准备与项目创建| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

Ext JS开发基本环境准备与项目创建

## Ext JS开发基本环境准备与项目创建
Ext JS是前端开发框架， 其可以整合到后端，也可以完美的作为前后端分离的前端。前端可以独立开发，与后端整合时只需要切换数据源即可。 这里为了简化介绍，搭建一个不依赖后端的应用，重点放在前端项目的介绍上。本篇示例的环境及工具包括：
OS，　Windows 10 , 64位
Sencha Cmd , 7.0.0.40
Ext JS SDK ,7.0.0
JDK 1.8
### 需要的软件和工具
Ext JS相关的文件和工具
Ext JS开发基本开发环境至少需要以下两个部分:
Sencha Cmd： 初始化项目、编译项目或启动项目的工具。
这里使用Windows 64位的7.0版,下载的文件名是SenchaCmd-7.0.0.40-windows-64bit.zip。
Ext JS SDK：开发工具包， 包括Ext JS的源码等。
这里使用试用版，官方现在的文件名是 ext-7.0.0-trial.zip。
这两个文件可以到 https://pan.baidu.com/s/1Gmj6QZ2JJXrMg-J4mK7Bdw 中下载。
### 工具安装
JDK 安装
Sencha Cmd需要JDK的支持，所以需要安装JDK， JDK的版本使用 1.8 或11都可以， 这里使用1.8。
Sencha Cmd 安装
解压 SenchaCmd-6.6.0.13-windows-64bit.zip，解压后的文件时.exe后缀的可执行文件，文件名是：SenchaCmd-7.0.0.40-windows-64bit.exe， 双击安装， 一直下一步即可，其中可以选择安装目录，这里安装到 D:\install\Sencha\Cmd\7.0.0.40目录下，设置页面如下：
![](/upload/picture/2022-10-10/upload_51a53851be4bedcbda1dcb05490572d0.png)

一直下一步安装后， 开启一个命令行窗口， 输入sencha或是 sencha help 命令回车后会显示当前的版本信息以及Sencha Cmd命令的帮助。
![](/upload/picture/2022-10-10/upload_5351a2573e5a0939e15886f88b56c1b6.png)

一直下一步安装后， 开启一个命令行窗口， 输入sencha或是 sencha help 命令回车后会显示当前的版本信息以及Sencha Cmd命令的帮助。
![](/upload/picture/2022-10-10/upload_c5b2805d3a8f229c34a3f53b866e9bcd.png)
Ext JS SDK 解压
Ext JS SDK不需要安装，直接解压即可。在使用Cmd创建项目的时候需要指定这个目录。这里解压到 D:\install\ext7。
![](/upload/picture/2022-10-10/upload_24b370cc37b40191fcfe9e976e8d203d.png)

解压后的路径结构如下：
![](/upload/picture/2022-10-10/upload_f70ff1b7c36d8bbdd9c28afbfd36bcbd.png)
使用Sencha Cmd创建项目
这里将项目创建到D:\demoworkspace\extjs 目录中， 项目名为Ext7Demo。创建步骤如下：
建立目录D:\demoworkspace\extjs\ext7-demo-app，新开命令行窗口，并切换到该 目录。
d:cd D:\demoworkspace\extjs\ext7-demo-app
![](/upload/picture/2022-10-10/upload_166aff93f01d2dd9d05c6cefd833760d.png)
使用sencha generate 创建项目
sencha -sdk D:\install\ext7 generate app  Ext7DemoApp ./

对以上命令参数说明如下：
·-sdk D:\install\ext7 指定Ext JS SDK的目录
generate app 初始项目
Ext7DemoApp 项目的名称，这个和项目的目录名可以不一样。 项目名称习惯使用驼峰法命名。（这里项目的目录是ext7-demo-app）。这个项目名称会反应在产生的代码中。
./ 项目代码产生在当前路径
命令执行的页面如下：
![](/upload/picture/2022-10-10/upload_9b413162d1d1a63611155763f41ea8ce.png)

执行完成后项目的目录结构如下图所示。
![](/upload/picture/2022-10-10/upload_b5d1a1cbaf5cc387541bc01b1408b4dc.png)
### 启动项目
Web应用一般需要放入Web服务器中（比如Apache、Tomcat或IIS等），部署并启动服务器后通过浏览器进行访问。如果安装了Node.js 则不需要部署到Web服务器， 因为Node.js是基于 Chrome V8 引擎的 JavaScript 运行环境，看上去的效果是Node.js包含了一个Web服务器， 同样，安装了Sencha Cmd，也可以直接通过相关的命令启动应用并查看，不需要将应用部署到Web服务器。
确保命令行窗口在 D:\demoworkspace\extjs\ext7-demo-app路径下，输入命令：
sencha app watch

命令执行的输入如下：
![](/upload/picture/2022-10-10/upload_65f2c7f9dd1e08675b399b2e7ae2710d.png)
从以上输出可以看到， 应用启动了，访问的路径是：http://localhost:1841。在浏览器中输入这个地址，页面效果如下：
![](/upload/picture/2022-10-10/upload_a30e70f99ceea8b903cb63f8ddaecf49.png)
### 项目说明
通过Cmd可以快速创建的一个项目的脚手架，这里创建的项目包括经典(classic)和现代（modern）两种模式，关于classic和modern后面会介绍。
这两种模式可以使用参数访问，经典模式可以不需要加参数（默认），也可以带上参数：
 http://localhost:1841?classic

现代模式访问通过如下地址：
http://localhost:1841/?modern

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

Ext JS开发基本环境准备与项目创建

网站导航