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目录下，设置页面如下：  一直下一步安装后， 开启一个命令行窗口， 输入`sencha `或是 `sencha help` 命令回车后会显示当前的版本信息以及Sencha Cmd命令的帮助。  #### Ext JS SDK 解压 Ext JS SDK不需要安装，直接解压即可。在使用Cmd创建项目的时候需要指定这个目录。这里解压到 `D:\install\ext7`。  解压后的路径结构如下：  ## 使用Sencha Cmd创建项目 这里将项目创建到D:\demoworkspace\extjs 目录中， 项目名为Ext7Demo。创建步骤如下： 1. 建立目录D:\demoworkspace\extjs\ext7-demo-app，新开命令行窗口，并切换到该 目录。 ``` d: cd D:\demoworkspace\extjs\ext7-demo-app ```  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. `./` 项目代码产生在当前路径 命令执行的页面如下：  执行完成后项目的目录结构如下图所示。  ## 启动项目 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 ``` 命令执行的输入如下：  从以上输出可以看到， 应用启动了，访问的路径是：` http://localhost:1841`。在浏览器中输入这个地址，页面效果如下：  ## 项目说明 通过Cmd可以快速创建的一个项目的脚手架，这里创建的项目包括经典(classic)和现代（modern）两种模式，关于classic和modern后面会介绍。 这两种模式可以使用参数访问，经典模式可以不需要加参数（默认），也可以带上参数： ``` http://localhost:1841?classic ``` 现代模式访问通过如下地址： ``` http://localhost:1841/?modern ``` ***** *****