构建您的第一个桌面应用程序

本指南提供分步说明，指导您使用 Sencha Architect 构建一个在桌面浏览器或平板电脑上运行的 Web 应用程序。示例应用程序名为 Car Listings，使用 Ext JS 6.x 框架和经典工具包（尽管您可以替换旧版本的 Ext JS，并按照本指南进行操作）。

应用程序描述

Car Listings 是一个简单的应用程序，演示了数据绑定的使用。在最终的应用程序中，用户在网格中选择一辆汽车以查看有关该汽车的详细信息，包括汽车的图片。在本教程结束时，您应该对如何构建和配置视图、如何建模数据以及如何将数据绑定到视图有更好的理解。

初步步骤

在使用本指南之前，请执行以下操作

1. 下载、安装和设置 Architect，然后设置 Web 服务器并在 Web 服务器上为您的项目创建一个目录，按照 安装和设置 以及 保存、预览和构建 中的说明进行操作。

2. 将 数据文件 示例下载到文件系统中方便的位置。（示例的完整项目源可以下载为 存档，或者您可以查看 GitHub 存储库。）

开始您的项目

要开始您的项目

1. 启动 Architect
2. 单击 创建新的
3. 在“新项目”菜单中，选择 Ext JS 6.0.x 框架
4. 选择 空白项目
5. 单击 创建

保存您的项目

Architect 界面加载后，立即保存项目。出现提示时，输入以下内容

• 将项目保存到磁盘
• 项目名称：CarListings
• 应用程序名称：CarListings

保存完成后，将出现“应用程序重命名”对话框。您可以单击“否”，因为这是一个全新的应用程序。

然后，项目应开始初始化 Cmd。

设置初始视图

1. 向项目添加一个 Panel 组件：在工具箱中搜索 Containers 类别，并将 Panel 拖到应用程序中心的画布上。

   

2. 初始视图：创建 Panel 后，MyPanel 列在项目检查器中的“视图”节点下。初始视图指示器出现在右侧。将光标放在其上方，Architect 应显示消息 此组件是您的初始视图。这意味着 Panel 将在应用程序运行时首先显示。请注意，initialView 配置也在配置面板中选中。一个应用程序只能有一个初始视图。

   

3. 再次保存您的项目

4. 通过单击工具栏中的“预览”按钮预览您的项目。

   

5. 如果您使用的是 Sencha Cmd Web 服务器，请将 URL 前缀 设置为 https://127.0.0.1:1841/ 地址。

将启动一个浏览器窗口，显示您添加到项目中的单个 Panel。

查看您的代码

在完成本教程的过程中，您可以随时查看项目的代码。在画布或项目检查器中选择一个组件，并使用画布右上角的“设计”和“代码”切换按钮分别在设计视图和代码视图之间切换。

添加和配置网格视图

1. 双击 Panel 的标题，将其更改为 Car Listing。

   

2. 通过选中配置面板中的复选框，将 frame 配置更改为 true。

   

3. 选择 Panel，然后单击弹出式配置按钮（右上角的齿轮）。将布局配置设置为 vbox。这会将 Panel 的未来子组件垂直排列。

   

   从工具箱的“Grids”类别中拖动一个 Grid Panel，并将其放到画布上的 Panel 容器中。请注意，您设置了顶级视图组件（在本例中为 panel）的布局，以控制子组件的排列方式。

4. 通过在画布或检查器中选择网格，然后单击配置面板中 title 配置右侧的清除图标 (“x”)，从网格中删除标题栏。

   

5. 将顶级 Panel 的 userClassName 配置从 MyPanel 更改为 CarListings。这将更改其在项目检查器中的名称。它还会更改底层源代码的 Ext.define 中生成的 JavaScript 类的名称。

注意：我们在此处使用 vbox 布局，因为我们打算在垂直堆栈中添加更多面板。仅上面的示例可以通过将 frame 配置设置为 true 的单个 Grid Panel 来实现。

使用数据：模型和 Store

如果您现在预览应用程序，您会看到一个没有数据的空网格和默认的列标题 -- 字符串、数字、日期和布尔值。这是因为我们尚未将网格绑定到数据 Store。让我们将网格绑定到一个新的 Store，并加载一些跑车的信息。

将您下载并解压缩的 数据文件 移动到您的项目目录。数据文件夹应与您的 CarListings.xds 文件位于同一级别。

如果您在纯文本编辑器中打开 cars.json 文件，您可以看到数据的格式和键值对。让我们仔细看看 Porsche 911 的条目（为了便于阅读而换行）。

{
    data: [{
        manufacturer: 'Porsche',
        model: '911',
        price: 135000,
        wiki: 'http://en.wikipedia.org/wiki/Porsche_997',
        img: '2004_Porsche_911_Carrera_type_997.jpg',
        quality: 
          [{name: 'overall', rating:1}, 
          {name: 'mechanical', rating: 4}, 
          {name: 'powertrain', rating: 2}, 
          {name: 'body', rating: 4},
          {name: 'interior', rating: 3},
          {name: 'accessories', rating: 2}]
    },{
        ...
    }]
}

接下来，我们将创建一个 Model 以在 Architect 中表示此数据。

创建模型

让我们创建一个 Model，其中包含我们想要了解的汽车实体的适当字段（键）。

1. 单击项目检查器右上角的“添加”按钮 (“+”)，然后单击 模型。一个新的名为 MyModel 的模型将出现在项目检查器的 Models 节点下。

   

2. 选择新创建的模型，并将其 userClassName 配置设置为 CarData。在配置面板中搜索 fields。单击“添加”按钮 (“+”)，并在提示 输入一个或多个字段名称 时，输入以逗号分隔的字段名称

    manufacturer, model, price, wiki, img, quality
   

3. 单击 完成 或按 Enter 键。

创建 Store

现在我们有了一个表示数据结构的 Model，我们可以创建一个使用 CarData Model 的 Store。

1. 单击项目检查器右上角的“添加”按钮 (“+”)，然后在 Store 子菜单下选择 Json Store。将创建一个名为 “MyJsonStore” 的新 Store。它出现在检查器的 Stores 节点下。

   注意： JsonStore 会自动添加 JsonReader，并假设我们将以 JSON 格式加载数据。

   

2. 警告图标应出现在检查器中新创建的 Store 的右侧，指示 Store 的配置存在问题。单击该图标将提供有关配置无效原因的更详细信息。

3. 在检查器中选择 Store，并将 model 配置设置为 CarData。警告图标应该消失。我们将在步骤 5 中修复 MyAjaxProxy 的警告。

4. 选择 Store，并将其 userClassName 配置设置为 CarDataStore。Store 的名称应在检查器中更新。

5. 选择 Store，并将其 userAlias 配置设置为 cardatastore。

6. 选择 CarDataStore 下方的 AjaxProxy，并将其 url 设置为 data/cars.json。请注意，此 URL 相对于您的项目。您的 URL 前缀必须正确设置才能在 Architect 中加载数据。

7. 右键单击 CarDataStore，然后单击 加载数据。

   注意：当代理的 url 配置或 Store 的 data 配置已设置时，上下文菜单中的 加载数据 功能将变为启用状态。

8. 将光标放在眼睛图标上会显示已加载到您的 Store 中的记录数。请注意，仅加载了一条记录。

9. 单击眼睛图标以查看响应数据。查看响应数据，您可以看到单个实体位于数据数组中。这就是为什么只加载了一条记录的原因。在检查器中选择 JsonReader，并将其 rootProperty 配置设置为 data（或先前版本的 Ext JS 中的 root 配置）。您的 Store 现在已正确配置。

   

10. 再次右键单击 CarDataStore，然后单击 加载数据。由于我们对 Store 的配置进行了会影响数据加载的更改，因此 Architect 已清除数据缓存。

11. 最后，将 Store 上的 autoLoad 配置设置为 true，这样我们就不必以编程方式加载它。

将网格绑定到 Store

接下来，我们将网格绑定到 Store。由于网格绑定到 Store，因此 Store 内的记录发生任何更改时，网格都会自动更新自身以反映这些更改。此外，如果向 Store 添加或从中删除任何记录，它们也会反映在网格中。

1. 在检查器中选择 Grid Panel。将其 store 配置设置为 CarDataStore。请注意，所有数据都消失了，因为我们的映射尚未设置。

2. 右键单击检查器中的 Grid Panel，然后选择“网格构建器”。您现在应该看到一个新的模态窗口，其中显示了我们之前输入的每个字段的列！

选中窗口底部的“删除现有”框以删除默认列。

单击生成，您应该会看到所有字段都变成网格上的列。

注意：如果您使用的是旧版本的 Architect，则可以使用“自动列”而不是“网格构建器”。

保存您的应用程序，然后单击“预览”。您可以在浏览器中看到您的网格及其数据。

如果您在浏览器中看到空白屏幕和/或空白网格，请确保以下内容

• 浏览器 JavaScript 控制台中没有出现错误
• 屏幕底部的 Architect 日志和输出区域中没有出现错误
• Store 上设置了 autoLoad 配置

您已完成构建 CarListings 应用程序的第一个主要步骤。

将网格连接到详细信息面板

接下来，我们添加一个详细信息面板，以在用户选择单个记录时显示有关网格中每个条目的其他信息。

添加详细信息面板

1. 选择顶级的 CarListings Panel。向下拖动面板的下边框来调整面板大小，使其足够大以容纳详细信息面板。使其高度大约加倍。

2. 在仍选中 CarListing 面板的情况下，在工具箱中搜索“panel”。双击“Panel”以将新 Panel 添加到项目检查器中当前选定的项目。这是一种替代方法，并且通常比拖放更快地添加组件。

3. 选择新添加的 Panel。搜索 tpl 配置，然后单击其右侧的“添加”按钮 (“+”)。所有组件都有一个 tpl 配置，该配置接受 XTemplate。有关模板库的更多信息，请参阅 XTemplate 参考。

4. 添加 tpl 配置后，单击其右侧的向前箭头图标以在中心阶段打开代码编辑器。将以下模板粘贴到代码编辑器中

`<img src="data/{img}" style="float: right" />
Manufacturer: {manufacturer} 
Model: <a href="{wiki}" target="_blank">{model}</a><br>
Price: {price:usMoney}`

花括号及其中的名称表示变量，这些变量方便地对应于我们的 CarData 模型中的字段。

注意： 这些步骤是按顺序相关的。当容器设置了 vbox 或 hbox 布局 时，它们新添加的子项会自动将其 flex 配置设置为 1。如果您在将 布局 设置为 vbox 之前添加子项，则需要手动将每个子项的 flex 设置为 1。

更新详细信息面板

让我们添加代码，通过事件绑定将两个面板粘合在一起。当用户在网格中选择特定条目时，我们希望应用程序使用我们刚刚设置的模板在详细信息面板中显示其详细信息。

1. 选择您最后添加的面板（带有模板的那个），并将其 itemId 配置设置为“detailPanel”。这使应用程序可以轻松地在 CarListings 类中检索对此特定面板的引用。

2. 清除 title 配置。

3. 在项目检查器中选择网格面板，搜索 View Controller Event Bindings 配置，然后单击其右侧的“添加”按钮（“+”）。选择 select 事件，然后单击“完成”或按 Enter 键。

4. 单击箭头图标以选择新的事件绑定。 Architect 已经为新函数生成了一个合理的函数名称，但如果您愿意，可以使用 fn 配置来更改它。

5. 双击项目检查器中的事件绑定以显示此事件处理程序的代码视图。请注意，我们只会编写方法主体。函数参数已经为我们定义好了。

6. 将以下代码粘贴到事件处理程序中。

    // grab a reference to the detailPanel via itemId
    // the # in front of the id indicates that we would like to grab a reference by
    var detailPanel = Ext.ComponentQuery.query('#detailPanel')[0];
    // update the detailPanel with data
    // this will trigger the tpl to become updates
    detailPanel.update(record.data);
   

保存项目并在浏览器中预览它。当您在网格中选择特定记录时，其他信息应显示在底部面板中。

添加图表

为了开始本项目的最后阶段，我们将添加一个图表以显示所选汽车的质量。

建模 ChartData

1. 在检查器中添加第二个模型。将其 userClassName 配置设置为 CarChart。

2. 检查如下所示的 quality 字段的内容。我们已经从 cars.json 将 quality 字段加载到 CarStore 中。我们现在正在创建一个额外的模型来专门保存其内容以用于图表绘制。

    "quality" : [{
        "name" : "overall",
        "rating" : 1
    },{
        "name" : "mechanical",
        "rating" : 4
    },{
        "name" : "powertrain",
        "rating" : 2
    },{
        "name" : "body",
        "rating" : 4
    },{
        "name" : "interior",
        "rating" : 3
    },{
        "name" : "accessories",
        "rating" : 2
    }]
   

3. 在配置面板中，向 CarChart 模型添加两个字段，这两个字段直接映射到 quality 字段中定义的每个键。在模型中创建两个名为 name 和 rating 的字段。这些字段将直接映射到 cars.json。

4. 创建一个 Store 并将其 userClassName 设置为 CarChartStore。直接单击子菜单 Store 将创建一个没有代理或读取器的普通 Store。

   

5. 通过将 Store 上的 model 配置设置为 CarChart 模型，将 CarChart 模型链接到 CarChartStore。

添加图表

1. 如果需要额外的空间来容纳图表，请调整 CarListings 面板的大小以使其位于下方。

2. 将另一个面板拖到 CarListings 面板上。将其放在面板的标题或检查器中的“视图”节点上。由于网格被拉伸到顶层面板的大小，因此您无法将其放在中心。或者，您可以选择顶层面板，然后在工具箱中双击“面板”。

3. 将其 itemId 配置设置为 chartPanel。

4. 将柱状图拖到第三个面板上（您最后添加的面板，应该是画布中最底部的面板）。

5. 在检查器中选择新创建的面板，然后单击画布中其弹出配置按钮（右上角的齿轮），并将其布局设置为 fit。这会在两个方向上拉伸图表以适合其父面板。

6. 清除中间和底部面板的 title 配置。

7. 在中间和底部面板周围添加边距。在检查器中选择中间面板 (detailPanel)，在过滤器字段中键入“margins”。

8. 将 margin 设置为 5 0 0 0。（请注意为 Ext.layout.container.VBox 设置 margins 配置，而不是为 Ext.Component 设置 margin 配置。）将相同的边距添加到底部面板 (chartPanel)。

9. 单击图表面板上的弹出配置按钮，然后选择 CarChartStore 以将图表组件绑定到 JSON Store。

   注意： 这会使图表消失，但目前没关系。我们只关心它在用户选择记录时显示出来。

10. 在检查器中选择图表下的“Category Axis”以编辑图表的 x 轴。
    此类别轴显示 CarListing 应用程序中汽车质量的类别。进行以下更改

    • 将其 title 配置更改为 Quality。

    • 将其 fields 配置从 x 更改为 name。

      name 字段为图表的 x 轴提供值 - 质量类别。

11. 在检查器中选择图表下的“Numeric Axis”以编辑图表的 y 轴。
    数值轴将显示每个汽车质量类别的值。进行以下更改

    • 将其 title 配置更改为 Score。

    • 将其 fields 配置从 y 更改为 rating。

      此配置确定在轴上渲染的内容，但实际上并不影响在图表上渲染的列。

    • 将 maximum 配置的值更改为 5，这将是 y 轴的最大值。

    • 将 minimum 配置的值更改为 0，这将是 y 轴的最小值。这很重要，因为它使 y 轴上的编号从 0 而不是从最低报告值开始。

    • 将 majorTickSteps 配置的值更改为 4。这决定了最小值和最大值之间有多少标记。

12. 在检查器中选择图表下的“MyBarSeries”。在配置面板中，找到 label 配置并将其更改为以下内容

       {
         display: 'insideEnd',
         field: 'rating',
         color: '#333',
         'text-anchor': 'middle'
     }
    

    注意： 我们必须引用键 text-anchor，因为它在键名中包含 -。

13. 对 MyBarSeries 进行以下其他更改。这些配置决定了作为系列在图表上渲染的实际列。

    • 将 xField 配置更改为 name。

    • 将 yField 配置更改为 rating。

14. 将图表的 itemId 配置设置为 qualityChart，以便我们可以通过代码访问它。

15. 在 onGridpanelSelect 中添加以下代码（教程前面添加到网格的事件处理程序），以便在用户选择记录时更新图表的 Store。

     // grab a reference to the qualityChart, notice we use down here instead of child  
     // because down will go down the container hierarchy at any depth and child  
     // only retrieves direct children
     var chart = Ext.ComponentQuery.query('#qualityChart')[0];
     // get the quality field out of this record
     var qualityData = record.get('quality');
     chart.store.loadData(qualityData);
    

有关 Ext JS Charting API 的更多信息，请参阅 Ext.chart.CartesianChart API 文档页面。

运行应用程序

让我们看一下在浏览器中运行的应用程序。

当您首次保存项目时，Architect 会将运行它所需的所有文件（包括 .html 和 .js 文件以及 Controller、Model、Store 和 View 的 .js 文件）放在您首次保存项目时指示的目录中。每次您再次构建时，Architect 都会自动更新所有文件。

要查看最终应用程序，请启动浏览器或直接单击“预览”，应用程序 UI 应显示。单击网格行，汽车详细信息应与汽车图像和显示各种类别的汽车质量数据的图表一起显示。