Ext JS是前端开发框架, 其可以整合到后端,也可以独立的作为前后端分离的前端。以上两种架构,Ext JS前端都可以独立开发,与后端整合时只需要切换数据源即可。 这里为了简化介绍,搭建一个不依赖后端的应用,重点放在前端项目的介绍上。本篇示例的环境及工具包括: 1. OS,Windows 10 , 64位 2. Sencha Cmd , 7.0.0.40 3. Ext JS SDK ,7.0.0 4. 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目录下,设置页面如下: ![](https://img.kancloud.cn/7b/0e/7b0e88bc453a712b1f1266b6cb84d5f0_620x514.png) 一直下一步安装后, 开启一个命令行窗口, 输入`sencha `或是 `sencha help` 命令回车后会显示当前的版本信息以及Sencha Cmd命令的帮助。 ![](https://img.kancloud.cn/f7/72/f7729b2eac16f16151c4cc08720e0854_1130x408.png) #### Ext JS SDK 解压 Ext JS SDK不需要安装,直接解压即可。在使用Cmd创建项目的时候需要指定这个目录。这里解压到 `D:\install\ext7`。 ![](https://img.kancloud.cn/4c/1f/4c1f455ef77b4fc30e48fcd4defb6d1e_618x575.png) 解压后的路径结构如下: ![](https://img.kancloud.cn/07/a1/07a102a9466e567e6408f817c41ede36_987x661.png) ## 使用Sencha Cmd创建项目 这里将项目创建到D:\demoworkspace\extjs 目录中, 项目名为Ext7Demo。创建步骤如下: 1. 建立目录D:\demoworkspace\extjs\ext7-demo-app,新开命令行窗口,并切换到该 目录。 ``` d: cd D:\demoworkspace\extjs\ext7-demo-app ``` ![](https://img.kancloud.cn/53/c9/53c91984e46a64a9c29f3e3e4d9ee7a5_955x39.png) 2. 使用sencha generate 创建项目 ``` sencha -sdk D:\install\ext7 generate app Ext7DemoApp ./ ``` 对以上命令参数说明如下: 1. ·`-sdk D:\install\ext7 ` 指定Ext JS SDK的目录 2. `generate app` 初始项目 3. `Ext7DemoApp` 项目的名称,这个和项目的目录名可以不一样。 项目名称习惯使用驼峰法命名。(这里项目的目录是ext7-demo-app)。这个项目名称会反应在产生的代码中。 4. `./` 项目代码产生在当前路径 命令执行的页面如下: ![](https://img.kancloud.cn/93/0f/930f426741ccbe56f6f6184cfe7f605e_1434x657.png) 执行完成后项目的目录结构如下图所示。 ![](https://img.kancloud.cn/77/34/7734f78e9dda2070b22b1c0a2fc73f3b_1010x625.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 ``` 命令执行的输入如下: ![](https://img.kancloud.cn/0d/c3/0dc320900467ba79ba099a964688f4c3_1109x443.png) 从以上输出可以看到, 应用启动了,访问的路径是:` http://localhost:1841`。在浏览器中输入这个地址,页面效果如下: ![](https://img.kancloud.cn/e5/ec/e5ec2dc424339b86f1ac12342ec6cf8c_1483x575.png) ## 项目说明 通过Cmd可以快速创建的一个项目的脚手架,这里创建的项目包括经典(classic)和现代(modern)两种模式,关于classic和modern后面会介绍。 这两种模式可以使用参数访问,经典模式可以不需要加参数(默认),也可以带上参数: ``` http://localhost:1841?classic ``` 现代模式访问通过如下地址: ``` http://localhost:1841/?modern ``` ***** *****