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

本指南提供使用 Sencha Architect 构建在桌面浏览器或平板电脑上运行的 Web 应用程序的分步说明。示例应用程序称为汽车列表，使用 Ext JS 6.x 框架使用经典工具包（尽管您可以在遵循本指南的过程中替换旧版本的 Ext JS）。

应用程序描述

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

初步步骤

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

1. 下载、安装和设置 Architect，然后按照安装和设置和保存、预览和构建中的说明设置 Web 服务器并在 Web 服务器上创建项目目录。

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

启动您的项目

要开始您的项目

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

保存您的项目

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

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

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

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

设置初始视图

1. 将面板组件添加到项目中：在工具箱中搜索容器类别，并将面板拖到应用程序中心的画布上。

   

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

   

3. 再次保存您的项目

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

   

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

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

查看您的代码

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

添加和配置网格视图

1. 双击面板的标题，将其更改为汽车列表。

   

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

   

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

   

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

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

   

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

注意：我们在这里使用vbox 布局，因为我们打算在垂直堆栈中添加更多面板。上面的示例本身可以使用单个网格面板来实现，并将frame配置设置为 true。

使用数据：模型和存储

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

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

如果您在纯文本编辑器中打开cars.json文件，您可以看到数据的格式和键值对。让我们仔细看看保时捷 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}]
    },{
        ...
    }]
}

接下来，我们将创建一个模型来在 Architect 中表示这些数据。

创建模型

让我们创建一个具有我们想要了解汽车实体的适当字段（键）的模型。

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

   

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

    manufacturer, model, price, wiki, img, quality
   

3. 单击完成或按 Enter 键。

创建存储

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

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

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

   

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

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

4. 选择存储，并将它的**userClassName**配置设置为CarDataStore。存储的名称应该在检查器中更新。

5. 选择存储，并将它的**userAlias**配置设置为cardatastore。

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

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

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

8. 将光标悬停在眼睛图标上将显示已加载到存储中的记录数。请注意，只加载了一条记录。

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

   

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

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

将 Grid 绑定到 Store

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

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

2. 右键单击 Inspector 中的 Grid 面板，然后选择“Grid Builder”。您现在应该会看到一个新的模式窗口，该窗口显示了我们之前输入的每个字段的列！

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

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

**注意：**如果您使用的是旧版本的 Architect，可以使用“Auto Columns”代替“Grid Builder”。

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

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

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

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

将 Grid 连接到 Detail 面板

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

添加 Detail 面板

1. 选择顶层的 CarListings 面板。通过向下拖动面板的下边界来调整面板的大小，使其足够大以容纳 Detail 面板。使其高度大约是原来的两倍。

2. 在 CarListing 面板仍处于选中状态的情况下，在工具箱中搜索“panel”。双击“Panel”以将新的 Panel 添加到项目 Inspector 中当前选定的项目。这是添加组件的另一种更常见且更快的做法，而不是拖放。

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` **layout** 时，它们新添加的子项会自动将其 `flex` 配置设置为 **1**。如果您在将 **layout** 设置为 `vbox` 之前添加子项，则需要手动将每个子项的 `flex` 设置设置为 **1**。

更新 Detail 面板

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

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` 字段的内容，如下所示。我们已经将 `quality` 字段从 `cars.json` 加载到 `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. 创建一个存储，并将它的 **userClassName** 设置为 `CarChartStore`。直接单击子菜单 `Store` 会创建一个没有代理或读取器的普通存储。

   

5. 通过将存储上的 `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 存储。

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

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

    • 将其 `title` 配置更改为 `Quality`。

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

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

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

    • 将它的标题配置更改为Score。

    • 将字段配置从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 图表 API 的更多信息，请参阅Ext.chart.CartesianChart API 文档页面。

运行应用程序

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

首次保存项目时，Architect 会将运行项目所需的所有文件（包括.html 和 .js 文件，以及控制器、模型、存储和视图的 .js 文件）放在首次保存项目时指示的目录中。每次重新构建时，Architect 都会自动更新所有文件。

要查看最终应用程序，请启动浏览器或只需单击预览，应用程序 UI 应该会显示。单击网格行，汽车详细信息应该会显示，以及汽车图像和显示各种类别汽车质量数据的图表。