## 开发工具（IDE集成开发平台） IDE开发平台可以加快开发的速度，可以选用Eclipse 或者Visual Studio Code，Sencha官方也提供了这两个IDE的插件，但是这个插件时收费的。对于初学者，可以不使用插件。这里使用Visual Studio Code，下载地址：[https://code.visualstudio.com/](https://code.visualstudio.com/)。 也可到如下地址下载： 链接：https://pan.baidu.com/s/1hjrxNp9bybqKgsNkwLdENA 提取码：eype ## Visual Studio Code安装 双击安装文件 VSCodeUserSetup-x64-1.42.0.exe 安装。默认会按照到`C:\Program Files`目录。 ## 在Visual Code Code中打开项目 启动Visual Studio Code， 选择File|Open Folder  选择项目路径  打开后的项目结构如下：  Ext JS支持两种开发模式： * Classic： 经典模式，桌面端应用 * Modern： 现代模式， 移动端应用 应该该示例项目创建的是包含和经典和现代模式的应用，所以项目的子目录包含classic和modern。 虽然经典和现代模式因为不同的终端页面显示的处理和API不同，但是对于数据已经模型相关的定义是没有差别的，所以这些部分是可以合并在一起的。 对项目的各子目录说明如下： * app，包括模式、数据仓库和控制器类的定义。 * build：编译后的目录 * classic：经典模式的视图类 * ext: Ext JS的基本类或原生类。（Ext JS SDK） * modern: 现代模式的视图类 * resource：资源文件， 比如图片文件等。 ## 在Visual Code 中启动项目 在Visual Studio Code中，可以直接打开命令终端，执行启动应用的命令。步骤是： 1. 在左边的文件导航区块右键单击 2. 选择“Open in Terminal”， 则在右边的下方会切换到 "TERMINAL"的标签页，该标签页就相当于一个命令窗口。 3. 该命令窗口的默认路径就是项目的根路径（注意：不要选中任何目录，否则会进入选中的目录的路径），输入 `sencha app watch`  ## 第一个改动： 从修改产生的代码开始 应用启动后，在浏览器端输入`http://localhost:1841/`， 浏览器显示的效果如图：  上图中导航栏条目旁边是一个长方形的方块，其实这是一个图标。在Sencha Cmd 6之前产生的项目基本上是正常的。 但是这个问题只出现在经典模式（classic）中， 在现代模式（modern）是正常的， 在浏览器中输入：`http://localhost:1841/?modern` 访问现代模式的效果，页面如下：  使用 Cmd产生的项目的classic模式的主页面的JS源文件位于 `classic\src\view\main\Main.js`,与modern模式对应的文件（ `modern\src\view\main\Main.js`）对比后会发现，导航栏条目的 iconCls略微有点不一样， 正常的显示包含`x-fa`。  iconCls是设定条目的图标样式，使用的是Font Awesome的字体图标库。 看起来classic中少了`x-fa`前缀，双击打开`classic\src\view\main\Main.js`，在iconCls中添加`x-fa`。 修改并保存的时候， 会发现命令控制台会即时的输出日志：  这是因为，** Cmd会即时侦听到文件的变化， 对于文件的修改甚至大部分的新增代码文件都可以即时侦听到， 不需要重启服务，只需要在浏览器端刷新页面就可以看到修改后的效果**，这里刷新页面，显示效果如下：  ## 开发尝鲜：自定义的Grid（网格） 接下来定义显示一个三国名人的网格（Grid），点击左边的“三国名人录”，在右边显示对应的表格，最终的效果如下：  开发步骤： 1. 定义模型类 Ext7DemoApp.model.User 2. 定义User类型的数据仓库：Ext7DemoApp.store.User 3. 定义Grid的组件Ext7DemoApp.view.main.UserGrid 4. 在左边导航栏增加一条记录，点击后显示步骤3的组件。 目录结构代码的增加和修改如下图：  #### 模型类 Ext7DemoApp.model.User Model , 模型，相当于后端开发的实体类，源码文件的全路径文件名是： app/model/User.js。该实体类包括三个属性： id 、name（名字）以及kingdom(所属的诸侯国)，代码如下： ``` Ext.define('Ext7DemoApp.model.User', { extend: 'Ext7DemoApp.model.Base', fields: [ 'id', 'name', 'kingdom' ] }); ``` * extend： 继承共同的父类 * fields： 模型类的字段 #### 数据仓库类 Ext7DemoApp.store.User Store, 数据仓库，包含了某种类型对象的集合。Store中数据的来源可以通过服务地址从后端获取，也可以使用本地内存数据， 简单起见，这是使用memory类型的数据，定义如下： ``` Ext.define('Ext7DemoApp.store.User', { extend: 'Ext.data.Store', alias: 'store.user', model: 'Ext7DemoApp.model.User', data: { items: [ { id: 1, name: '刘备', kingdom: "蜀国" }, { id: 2, name: '曹操', kingdom: "魏国" }, { id: 3, name: '孙权', kingdom: "吴国" }, ] }, proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'items' } } }); ``` * extend： 继承的父类Ext.data.Store * alias，别名，这里配置为`store.user`后， 在组件中就可以使用 store后面的`user`来使用了。 * data： 包含的数据集合 * proxy, 数据获取的方式以及解析器的配置。这里读取内存数据（memory,也就是data配置的数据），reader配置中， type是数据的类型， `json`代表JSON对象格式，rootProperty是使用对象中的哪一个键的值作为数据源。 完成以上代码，在浏览器中刷新就可以看到效果了。 示例项目路径： [https://github.com/osxm/demoworkspace/tree/master/extjs/ext7-demo-app](https://github.com/osxm/demoworkspace/tree/master/extjs/ext7-demo-app) ***** *****