现代应用程序

在本演练中，我们将构建一个员工目录应用程序。本指南将提供有关如何使用 Architect 4.0+ 构建 Ext JS Modern 应用程序的基本了解。

步骤 1：启动 Architect

首先，您将下载 Architect 并创建一个空白项目。

1. 从 这里 下载 Architect

2. 在您的计算机上启动 Architect，并在必要时注册或继续试用订阅

3. 在初始 Architect 对话框中，点击新建项目

4. 选择您的框架：在“新建项目”窗口的右上角选择 Ext JS 6.0.x Modern

5. 选择项目格式：点击空白项目，然后点击创建。这将创建空的应用程序结构，我们将向其中添加组件和应用程序逻辑以构建我们的员工目录。

步骤 2：添加选项卡面板并保存项目

我们应用程序的导航框架是使用选项卡面板创建的，它允许我们在员工目录列表和公司信息选项卡之间导航。

1. 在 Architect 右侧的工具箱面板中，搜索“选项卡面板”。
   将“选项卡面板”组件从容器组拖放到设备画布上。

2. 点击工具栏左上角的“保存”按钮，然后从菜单中点击“保存”。

   1. 提供一个保存路径，Architect 应用程序将保存到该路径。

   2. 输入一个项目名称。这也会是您应用程序在保存路径中的目录。在本演练中，使用“EmployeeDirectory”。

   3. 键入一个应用程序名称。这将是应用程序在其所有输出类文件中的命名空间。在本演练中，输入“EmpDir”。

   4. 点击保存

      • 注意：不要将您的项目保存在另一个项目目录（或其他 Cmd 创建的工作区）中。

3. 在下一个提示中，当询问“您是否要扫描您的项目以查找对旧应用程序名称的引用？”时，点击否。

4. 要预览应用程序的进度，点击保存按钮右侧的“预览应用程序”按钮 ，然后点击预览按钮。您的默认浏览器将打开一个选项卡，显示应用程序的当前进度（我们拖放到设备画布上的选项卡面板）。

步骤 3：使用仅 2 个选项卡更新选项卡面板

在本节中，您将修改选项卡面板的默认视图，使其仅包含您最终应用程序所需的组件。

1. 从项目检查器窗格中选择MyTabPanel

2. 在工具箱窗格的右下角是配置窗格，用于修改应用程序中视图和其他类的配置。在配置窗格的筛选配置…字段中搜索“名称”。

3. 将userClassName配置的值从“MyTabPanel”更改为“Main”。

4. 接下来，删除Tab 3

5. 在工具箱窗格中搜索“grid”

6. 将“Grid”组件的一个实例拖到项目检查器窗格中Tab 1的上方，将网格添加到选项卡面板作为第一个选项卡

7. 选择Tab 1，在配置窗格中搜索“title”。将标题更新为“员工目录”

   • 或者，您也可以通过双击主设计窗格设备画布中选项卡的文本并输入新文本/标题来重命名选项卡。

8. 对于“员工目录”选项卡，在配置窗格中搜索输入“iconCls”，然后单击过滤器字段右侧的添加以添加“iconCls”作为自定义配置。将“iconCls”的值设置为“x-fa fa-users”。这将使用 Ext JS 主题的图标集在选项卡中添加一个图标。

9. 在项目检查器窗格中选择Tab 2。将标题更新为“关于 Sencha”

10. 对于“关于 Sencha”选项卡，添加自定义“iconCls”配置并将它的值设置为“x-fa fa-info-circle”。

11. 预览项目以在 Architect 之外查看您的更新。

    • 如果您在单击预览按钮之前没有保存，系统将提示您保存。

步骤 4：在 Tab 2 中添加“关于 Sencha”面板

在这里，您将添加公司信息面板的内容和样式。

1. 在项目检查器窗格中选择“关于 Sencha”选项卡后，在配置面板中搜索“html”。将 html 更改为以下内容

   • <h1>关于 Sencha</h1><br/>超过 10,000 家客户和 60% 的财富 100 强企业依赖 Sencha 解决方案来交付推动其业务发展的创新型应用程序。Sencha 长期致力于 Web 技术，极大地降低了跨多种设备类型开发和交付企业应用程序的成本和复杂性。<br/><br/><h2>使用 JavaScript 创建功能丰富的 HTML5 应用程序</h2><br/>Sencha Ext JS 是最全面的 MVC/MVVM JavaScript 框架，用于构建功能丰富、跨平台的 Web 应用程序，面向台式机、平板电脑和智能手机。Ext JS 利用现代浏览器的 HTML5 功能，同时保持对传统浏览器的兼容性和功能。<br/><br/>Ext JS 包含数百个高性能 UI 小部件，这些小部件经过精心设计，以满足最简单和最复杂的 Web 应用程序的需求。Ext JS 模板和布局管理器让您完全控制显示，无论设备和屏幕尺寸如何。高级图表包允许您可视化大量数据。该框架包含一个强大的数据包，可以从任何后端数据源获取数据。Ext JS 还提供了一些开箱即用的主题，以及完整的主题支持，让您构建反映您品牌的应用程序。它还包含一个辅助功能包 (ARIA)，以帮助您符合第 508 节的合规性。

2. 通过搜索“padding”并将“padding”配置值设置为 10，为“关于 Sencha”选项卡添加填充

3. 单击保存

4. 预览应用程序

步骤 5：添加模型

在为员工目录添加数据存根之前，您将首先创建一个数据模型，其中包含描述要由网格/目录使用的数据集的字段。

1. 在项目检查器窗格中，单击“+”按钮，然后从下拉菜单中选择模型

2. 在配置面板中搜索“name”，并将“userClassName”配置从“MyModel”更改为“Employee”

3. 从配置面板中搜索“fields”。

4. 单击 fields 配置右侧的“+”按钮。

5. 输入“firstName, lastName, officeLocation, phoneNumber”，然后单击完成

6. 点击保存

步骤 6：添加存储

接下来，您将向项目添加一个数据存储，该存储将为员工目录视图提供数据。Architect 将生成模拟数据，让您进一步可视化应用程序在填充员工数据后的工作方式。

1. 从项目检查器窗格中，单击“+”按钮，然后从下拉菜单中选择存储 > Json 存储

2. 在配置面板中搜索“name”，并将“userClassName”从“MyJsonStore”更改为“Employees”

3. 右键单击项目检查器窗格中的Employees 存储项，然后选择生成模拟数据

4. 在生成模拟数据对话框窗口中，为选择模型字段选择“Employee”，然后单击生成按钮

   • 注意：当不为您的应用程序生成模拟数据时，您需要将 Employee 模型与 Employees 存储关联起来，方法是在存储配置中过滤“model”，然后从“model”配置的下拉选项中选择“Employee”模型。

5. 点击保存

步骤 7：设置员工目录网格

员工目录网格已添加为一个选项卡，但尚未配置为显示来自员工数据存储的员工数据。在以下步骤中，您将配置员工网格的显示方式，并将每列与其在数据存储中的相应字段关联起来。

1. 选择位于“项目检查器”窗格中的“员工目录”网格项，该窗格位于“应用程序”>“视图”>“主”>“员工目录”下。

2. 在“配置”面板中搜索“columns”，并删除“Columns”配置中的所有条目，除了**String**以外，方法是单击每个条目旁边的“X”图标。

3. 在“Columns”配置中，通过单击“Columns”配置行上的“+”按钮并从下拉菜单中选择“Column”，添加两列。

4. 在“配置”面板中搜索“store”，并从“store”配置的下拉选项中选择“Employees”。

5. 从“项目检查器”窗格中，在“员工目录”网格项下选择“String”列。

6. 在“配置”面板中搜索“text”，并将值从“String”更改为“First Name”。

7. 搜索“dataIndex”配置，并从“dataIndex”配置的下拉选项中选择“firstName”。

8. 从“项目检查器”窗格中选择“MyColumn1”。

9. 在“配置”面板中搜索“text”，并将值从“MyColumn1”更改为“Last Name”。

10. 搜索“dataIndex”配置，并为“dataIndex”配置选择“lastName”。

11. 从“项目检查器”窗格中选择“MyColumn2”。

12. 在“配置”面板中搜索“text”，并将值从“MyColumn2”更改为“Phone Number”。

13. 搜索“dataIndex”配置，并为“dataIndex”配置选择“phoneNumber”。

14. 对于每列，搜索“width”配置，并将值设置为120。

15. 预览应用程序

步骤 8：添加表单面板

完成员工网格后，我们将创建一个用于查看和修改员工记录详细信息的表单。

1. 在“工具箱”窗格中搜索“form”，并将“表单面板”实例拖放到“项目检查器”窗格中的“视图”节点上。

2. 在“配置”面板中搜索“name”，并将“userClassName”从“MyFormPanel”更改为“UpdateRecordForm”。

3. 搜索“title”，并将其从“My Form”更改为“Update Record”。

4. 搜索“modal”，并选中它。

5. 搜索“centered”，并选中它。

6. 在“工具箱”窗格中搜索“text field”。

7. 将“文本字段”组件拖放到设备画布上，并将其放置在“更新记录”表单面板上。重复此操作三次，以便在“更新记录”上总共有四个文本字段。

8. 选择第一个文本字段（从设计视图或“项目检查器”窗格中），并搜索“label”配置。将标签从“Field”更改为“First Name”。对每个文本字段执行相同的操作，使用以下标签：First Name、Last Name、Office Location和Phone Number。

9. 在“工具箱”窗格中搜索“toolbar”，并将“工具栏”拖放到“表单面板”上。

10. 选择工具栏后，搜索“docked”配置，并使用下拉菜单将其值设置为“bottom”。

11. 点击保存

步骤 9：向表单面板添加按钮

接下来，您将向“更新记录”表单添加按钮，这些按钮将保存对员工记录的编辑，或取消编辑并关闭表单（我们将保存记录与表单本身的绑定以备后用）。

1. 在“工具箱”窗格中搜索“button”。将“按钮”实例拖放到设备画布上的工具栏顶部。

2. 搜索“text”配置，并将值从“MyButton”更改为“Submit”。

3. 搜索“iconCls”配置，并输入“x-fa fa-check”。

4. 在配置搜索输入中输入“event”，并单击**视图控制器事件绑定**旁边的“+”。

5. 输入“tap”，然后单击**完成**按钮。这将在**视图控制器事件绑定**下添加一个“onButtonTap tap”项，其中“onButtonTap”是单击按钮时要执行的方法的名称。

6. 单击“onButtonTap”项上的“->”按钮。将“fn”值从“onButtonTap”更改为“submitUpdate”。这将向“更新表单”的视图控制器添加“submitUpdate”方法。

7. 在项目检查器窗格中，双击 **UpdateRecordFormViewController** 节点下的 **submitUpdate** 项目。这将打开 submitUpdate 方法的代码视图（*注意，**设计** 视图现在已切换到主窗格中的 **代码** 视图）。为 submitUpdate 方法输入以下代码

    var view = this.getView(),
        record = view.getRecord();
    view.destroy();
    record.commit();
   

8. 按下代码编辑器右上角的“勾号”按钮以提交代码

9. 使用中心窗格右上角的 **设计** 切换按钮切换回设计视图

10. 拖动另一个“按钮”实例，并将其放置在设备画布上的工具栏顶部

11. 搜索“text”配置，并将值从“MyButton1”更改为“取消”

12. 搜索“iconCls”配置，并输入“x-fa fa-close”的值

13. 在配置搜索输入中输入“event”，然后单击 **视图控制器事件绑定** 旁边的“+”。

14. 输入“tap”，然后单击 **完成** 按钮。

15. 单击“onButtonTap”项目上的“->”按钮。将“fn”值从“onButtonTap”更改为“cancelUpdate”。

16. 在项目检查器窗格中，双击 **UpdateRecordFormViewController** 节点下的 **cancelUpdate** 项目。这将打开 cancelUpdate 方法的代码视图。为 cancelUpdate 方法输入以下代码

    var view = this.getView(),
        record = view.getRecord();
    view.destroy();
    record.reject();
    

17. 单击代码编辑器右上角的“勾号”按钮以提交代码

18. 点击保存

步骤 10：从员工网格显示表单面板

接下来，您将添加用于在单击/点击网格行时显示更新记录表单的逻辑。

1. 在项目检查器窗格中，选择 **员工目录** 下的网格（*在应用程序 > 视图 > 主页 > 员工目录*）。

2. 在配置搜索输入中输入“event”，然后单击 **视图控制器事件绑定** 旁边的“+”。

3. 输入“childtap”，然后单击 **完成** 按钮。

4. 单击“onGridChildTap”项目上的“->”按钮。将“fn”值从“onGridChildTap”更改为“onPopupForm”。

5. 在项目检查器窗格中，双击 **MyTabPanelViewController** 节点下的 **onPopupForm** 项目。这将打开 onPopupForm 方法的代码视图。为 cancelUpdate 方法输入以下代码

    Ext.Viewport.add({
        xtype: 'updaterecordform',
        width: 400,
        record: record,
        viewModel : {
            data: {
                employee: record
            }
        }
    });
   

6. 单击代码编辑器右上角的“勾号”按钮以提交代码

7. 预览应用程序。注意，单击/点击网格的一行将显示更新记录表单面板。

步骤 11：将弹出表单中的数据绑定到网格

最后，让我们设置将员工记录绑定到用于编辑记录的表单字段。绑定使用上一节中 **updaterecordform** 的 `viewModel` 配置。记录与具有“employee”键的视图模型数据相关联。在将模型字段的值绑定到协调文本字段的值时，员工记录上的每个命名字段将在以下步骤中使用。

1. 在项目检查器窗格中，选择应用程序 > 视图 > UpdateRecordForm > MyTextField 中的 **姓氏** 文本字段。

2. 搜索“bind”配置，然后单击 **编辑** 按钮

3. 在代码视图中输入“{employee.firstName}”的值，然后单击代码编辑器右上角的“勾号”按钮以提交值

4. 选择姓氏文本字段（MyTextField1），搜索“bind”配置，并将值设置为：“{employee.lastName}”

5. 选择员工位置文本字段（MyTextField2），搜索“bind”配置，并将值设置为：“{employee.officeLocation}”

6. 选择电话号码文本字段（MyTextField3），搜索“bind”配置，并将值设置为：“{employee.phoneNumber}”

7. 预览应用程序。当单击/点击网格行时，其记录将加载到弹出表单面板中。现在可以对四个字段值进行编辑，提交按钮将编辑提交到基础记录，取消将放弃编辑。