现代应用程序

在本演练中，我们将构建一个员工目录应用程序。本指南将提供有关如何使用 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. 工具箱窗格的右下侧是配置窗格，用于修改应用程序中视图和其他类的配置。在配置窗格的过滤器配置…字段中搜索“name”。

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

4. 接下来，删除 Tab 3

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

6. 将“表格 (Grid)”组件的实例拖到“项目检查器”窗格中的 Tab 1 上方，以将表格添加到标签页面板作为第一个标签页

7. 选择 Tab 1，并在配置窗格中搜索“title”。将标题更新为“Employee Directory”

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

8. 对于“Employee Directory”标签页，在配置窗格中搜索输入“iconCls”，然后单击过滤器字段右侧的添加以将“iconCls”添加为自定义配置。将“iconCls”的值设置为“x-fa fa-users”。这将使用 Ext JS 主题的图标集向标签页添加图标。

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

10. 对于“About Sencha”标签页，添加自定义“iconCls”配置并将其值设置为“x-fa fa-info-circle”。

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

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

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

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

1. 在“项目检查器”窗格中选择“About 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)，以帮助符合 Section 508 标准。

2. 通过搜索“padding”并将“padding”配置值设置为 10，为我们的“About Sencha”标签页添加内边距

3. 单击保存

4. 预览应用程序

步骤 5：添加模型

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

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

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

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

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

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

6. 单击保存

步骤 6：添加数据存储 (Store)

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

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

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

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

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

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

5. 单击保存

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

员工目录表格已添加为标签页，但尚未配置为显示来自 Employees 数据存储的员工数据。在以下步骤中，您将配置员工表格的呈现方式，并将每列与其在数据存储中的相应字段关联起来。

1. 选择“项目检查器”窗格中找到的“员工目录 (Employee Directory)”表格项，位置为“应用程序 (Application) > 视图 (Views) > Main > 员工目录 (Employee Directory)”

2. 在配置面板中搜索“columns”，然后单击每个条目旁边的“X”图标删除“列 (Columns)”配置上的所有条目，但 String 除外

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

4. 在配置窗格中搜索“store”，然后从数据存储配置的下拉选项中选择“Employees”

5. 从“项目检查器”窗格中的“员工目录 (Employee Directory)”表格项下选择“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”，并将“表单面板 (Form Panel)”实例拖到“项目检查器”窗格中的“视图 (Views)”节点上

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

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

4. 搜索“modal”，然后选择（选中）它

5. 搜索“centered”，然后选择它

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

7. 将“文本字段 (Text Field)”组件拖到设备画布上，然后将其放在“更新记录 (Update Record)”表单面板上。再执行三次此操作，使“更新记录 (Update Record)”上共有四个文本字段。

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

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

10. 在选择工具栏的情况下，搜索“docked”配置，然后使用下拉列表将其值设置为“bottom”

11. 单击保存

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

接下来，您将向“更新记录 (Update Record)”表单添加按钮，这些按钮将保存对员工记录的编辑，或取消编辑并关闭表单（我们将把记录绑定到表单本身，留到稍后的步骤）。

1. 在工具箱窗格中搜索“button”。拖动“按钮 (Button)”实例并将其放在设备画布中的工具栏顶部。

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

3. 搜索“iconCls”配置，然后输入值“x-fa fa-check”

4. 在配置搜索输入“event”，然后单击 视图控制器事件绑定 (View Controller Event Bindings) 旁边的“+”。

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

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

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

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

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

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

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

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

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

13. 在配置搜索输入“event”，然后单击 视图控制器事件绑定 (View Controller Event Bindings) 旁边的“+”。

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：从员工表格显示表单面板

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

1. 在“项目检查器”窗格中，选择 员工目录 (Employee Directory) 下的表格（位置为“应用程序 (Application) > 视图 (Views) > Main > 员工目录 (Employee Directory)”）。

2. 在配置搜索输入“event”，然后单击 视图控制器事件绑定 (View Controller Event Bindings) 旁边的“+”。

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. 预览应用程序。请注意，单击/点击表格的行将显示“更新记录 (Update Record)”表单面板。

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

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

1. 在“项目检查器”窗格中选择 First Name 文本字段，位置为“应用程序 (Application) > 视图 (Views) > UpdateRecordForm > MyTextField”。

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

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

4. 选择“Last Name”文本字段 (MyTextField1)，搜索“bind”配置，并将值设置为：“{employee.lastName}”

5. 选择“Employee Location”文本字段 (MyTextField2)，搜索“bind”配置，并将值设置为：“{employee.officeLocation}”

6. 选择“Phone Number”文本字段 (MyTextField3)，搜索“bind”配置，并将值设置为：“{employee.phoneNumber}”

7. 预览应用程序。当单击/点击表格行时，其记录将加载到弹出表单面板。现在可以对四个字段值进行编辑，单击“提交 (Submit)”按钮会将编辑提交到底层记录，单击“取消 (Cancel)”将放弃编辑。