存储和模型

Architect 项目使用存储和模型来处理应用程序中的数据。Ext JS 应用程序使用存储和模型范例来存储和操作数据；Sencha Architect 为两者提供了简单、统一的界面。

本指南是对此主题的介绍。

• 有关 Ext JS 数据包的更多信息，请参阅 Ext JS 数据 指南，并按照该指南中的链接了解更多详细信息。

让我们从模型开始。在最基本的层面上，模型描述了一组数据类型的字段结构以及每个字段的类型。例如，“用户”模型可能包含以下字段：“username”、“department”、“date_joined”和“manager”，并将“date_joined”字段定义为日期类型，其他字段定义为字符串类型。换句话说，模型定义了应用程序访问的数据的模式。

存储是一个对象，它保存数据记录的集合，并允许应用程序迭代、搜索和操作这些记录。存储的每个记录都是与该存储关联的特定模型的实例。以下是我们的示例，其中模型描述了“用户”包含的字段，我们的“用户”存储将包含所有用户的列表。

视图访问存储以填充其各自的可视化对应物。例如，“用户详细信息”视图可能会访问“用户”存储，查询特定用户，并在应用程序中填充字段（例如用户名和加入日期）的内容。

存储需要一个从中提取数据的源。最基本的存储是静态的、硬编码的数据集，但更常见的是从 Web 中提取数据。为此，我们有两种工具

• 代理告诉存储从外部源加载数据的位置和方式。在现代应用程序中，这通常是从 Web 服务器请求的 JSON 数据
• 读取器告诉应用程序在数据中查找的位置。例如，如果从 Web 服务器返回的对象在名为 user_list 的根级别返回我们的数据，则读取器的根将设置为 user_list。

这是一个 JSON 文件示例，用于说明

{
"response_code": 200,
"response_message": "OK",
"response_timestamp": 1363208209,
"user_list": [
  {
    "username": "bob",
    "date_created": 1363148384,
    "profile": "Bob is from Arkansas. He enjoys reading, live music, and cookies."
  },
  {
    "username": "jane",
    "date_created": 1363106223,
    "profile": "Jane is from Virginia. She loves math, cooking, and this application!"
  }
]
}

总结数据范例

• 存储为 UI 组件提供客户端数据缓存。
• Architect 中的存储从本地或远程源检索数据，并使其可用于在 UI 组件（如网格面板、树面板、组合框、数据视图、列表或嵌套列表）中显示。
• 存储与代理一起工作以加载数据，并与读取器一起工作以将数据解析为正确的模式，该模式由模型确定。
• 存储本质上是模型实例的集合。
• 存储还提供用于排序、过滤和查询其中包含的模型实例的功能。

有关存储的更多详细信息，请参阅相应的参考页面：Classic Data Store 或 Modern Data Store

设置存储和模型的基本过程如下

1. 添加和配置模型；这包括向模型添加字段并将字段映射到数据。
2. 添加存储以及适当的代理和读取器；在 Architect 中，当您选择存储类型时，会自动添加适当的代理和读取器。
3. 配置存储、代理和读取器。
4. 将模型与存储关联。
5. 将存储与视图组件关联。

本指南的其余部分包含完成这些步骤中每个步骤的说明。

进一步阅读

• 本指南末尾包含三个存储示例。
• 有关在实际应用程序中包含所有这些步骤的示例，请参阅 构建您的第一个桌面应用程序 和 构建您的第一个移动应用程序。

模型

Architect 提供了一个完整的 MVC 包，使用模型来表示应用程序中使用的数据对象。您可以使用模型，就像在 Architect 中使用其他组件一样，将它们添加到您的项目，然后配置它们。

添加模型

单击检查器右上角的添加按钮（“+”），然后选择模型以向项目添加模型，或从工具箱中的“数据”类别中选择模型。

Architect 在检查器中的“模型”节点下显示模型。

配置模型：基础知识

在检查器中选择模型以在配置面板中打开其配置。以下是为模型设置的基本配置，以启用和关联存储以加载数据

userClassName -- 为模型指定唯一的名称。

字段 -- 用于向模型添加字段。要添加字段

1. 单击右侧“值”下的添加按钮（“+”）以添加字段。
2. 为字段指定名称；名称应与记录字段名称匹配。您可以通过以逗号分隔列表的形式键入多个字段（例如，“name, birthday, hobbies”）来一次添加和命名多个字段。
3. 检查器在其对应的模型下显示每个配置。
4. 添加字段后，可以通过在检查器中选择该字段来进一步配置它。例如，“mapping”配置用于当您请求的数据源返回名为“user_name”的字段，但您想将您的字段称为“username”时；在这种情况下，将“username”字段的“mapping”配置设置为“user_name”。

有关此示例，请参阅 构建您的第一个移动应用程序 的“添加和配置存储和模型”部分。

其他模型配置

虽然存储加载数据不是必需的，但您也可以通过“配置”面板向模型添加关联、代理和验证器。以下是其他重要的模型配置。

关联： 向模型添加关联。从 BelongsTo、HasMany 或 HasOne 中选择。有关更多信息，请参阅 关联文档

代理： 向模型添加代理。通常，您在存储上定义代理，但您也可以在模型上定义代理；如果您的项目有多个存储使用相同的模型并共享相同的代理，那么这样做很有用，这样您就不必为每个存储重新定义它。从以下类型中选择

• Ajax
• Direct
• JsonP
• LocalStorage
• Memory
• Rest
• SessionStorage

验证器： 向模型添加验证器。从以下类型中选择

• Email
• Exclusion
• Format
• Inclusion
• Length
• Presence
• Range

有关更多信息，请参阅 验证器。

字段配置

在检查器中选择字段以设置其配置，包括以下内容

• name
• type
• mapping
• sortDir
• sortType

有关更多信息，请参阅 字段。

存储

存储包含应用程序的实际信息。Architect 在工具箱中提供了一个通用存储，您可以将其添加到您的项目中。然后，您可以为其分配一个代理，该代理告诉存储如何以及从何处加载其数据（URL、协议等）；您还可以分配一个读取器，该读取器知道传入原始数据的格式，以便可以将其解析为目标模型记录。

Architect 还提供了几种专门的存储类型，这些类型预配置了一些最常见的代理/读取器组合。例如，JsonP 存储会自动配置 Ajax 代理和 JSON 读取器。这只是一个起始配置；您可以随意删除或替换初始代理和读取器。

请注意，您还可以通过使用单击项目检查器顶部的 + 号获得的下拉菜单来添加存储。

工具箱中提供了以下存储类型

存储

一个通用的存储，没有初始代理或读取器

• 存储类 - classic | modern
• 代理类 - 无
• 读取器类 - 无

JSON 存储

一个最初配置了 Ajax 代理和 JSON 读取器的存储。通常用于通过 AJAX 调用检索 JSON 编码的数据。

• 存储类 - classic | modern
• 代理类 - classic | modern
• 读取器类 - classic | modern

JsonP 存储

一个最初配置了 JsonP 代理和 JSON 读取器的存储。通常用于通过脚本标记检索 JSON-P 包装的 JSON 数据；当数据从不同的域加载时特别有用。

• 存储类 - classic | modern
• 代理类 - classic | modern
• 读取器类 - classic | modern

数组存储

一个最初配置了 Ajax 代理和数组读取器的存储。类似于 Json 存储，但适用于目标 JSON 数据的各个记录编码为数组而不是对象的情况。

• 存储类 - classic | modern
• 代理类 - classic | modern
• 读取器类 - classic | modern

XML 存储

一个最初配置了 Ajax 代理和 Xml 读取器的存储。当数据是 XML 编码时常用。本指南的末尾包含使用 Xml 存储的示例。

• 存储类 - classic | modern
• 代理类 - classic | modern
• 读取器类 - classic | modern

Direct 存储

一个最初配置了 Direct 代理和 Json 读取器的存储。当数据源使用 Ext Direct 协议公开时常用。

• 存储类 - classic | modern
• 代理类 - classic | modern
• 读取器类 - classic | modern

树存储

Architect 还提供了以下树存储类型，它们将其数据保存在嵌套的树状结构中，而不是平面集合中。这些通常仅与知道如何显示树状数据的视图组件结合使用，例如经典工具包中的 树面板 或现代工具包中的 嵌套列表。

树存储

一个最初配置了 Ajax 代理和 JSON 读取器的树存储。通常用于通过 AJAX 调用检索 JSON 编码的树数据。

• 存储类 - classic | modern
• 代理类 - classic | modern
• 读取器类 - classic | modern

JsonP 树存储

最初配置了 JsonP 代理和 JSON 读取器的树状数据存储。通常用于通过 script 标签检索 JSON-P 封装的 JSON 树状数据；当数据从不同的域加载时尤其有用。

• 存储类 - classic | modern
• 代理类 - classic | modern
• 读取器类 - classic | modern

XML 树状数据存储

最初配置了 Ajax 代理和 XML 读取器的树状数据存储。当树状数据采用 XML 编码时常用。

• Store 类 - 经典版 / 现代版
• Proxy 类 - 经典版 / 现代版
• Reader 类 - 经典版 / 现代版

要获取关于每个 Store 在 Architect 运行时执行操作的更多详细信息，只需将鼠标悬停在工具箱中每个 store 类型旁边的 ? 上；这将显示该类的简要描述以及指向 API 文档的链接。

添加 Stores

您有两种不同的选项可以将 Store 添加到项目中。第一种是单击检查器右上角的添加按钮（“+”），然后拖动光标到 Store 以打开按字母顺序排列的 Store 类型列表。

或者，您可以从工具箱中拖动 Store：单击“数据”类别，然后向下滚动到下拉菜单中的“数据存储”组。选择您想要的 Store 并将其拖动到检查器面板；将其放到“Stores”节点上。

当您选择一个 Store 时，它会添加到项目检查器中的 Stores 节点下，同时还会添加适当的代理和读取器。您可以查看中心面板中的代码视图以查看生成的代码。

您不必使用默认类型的代理和/或读取器；要选择不同的类型

• 转到项目检查器面板。
• 右键单击您要替换的代理或读取器。
• 从显示的下拉菜单中选择“转换”。
• 从下拉菜单中选择您想要的代理或读取器。

配置 Stores：基础

在检查器中选择 Store 以在配置面板中打开其配置。选择代理和读取器以查看它们的配置。

Stores、代理和读取器有很多配置，但只有少数几个基本配置是入门真正必要的。

在您成功完成这些步骤之前，Store 无法加载数据。Architect 通过在检查器中 Store 的右侧显示一个感叹号来告知您这一点。

（有关配置中任何属性的详细信息，请将光标放在属性名称旁边的问号上，以显示描述和指向该配置的 API 文档的链接。）

在 Store 中，设置以下内容

userClassName -- 为 Store 提供唯一的名称。这将成为生成代码中 store 的类名。

storeId -- 用于 stores 的主要标识符。

autoLoad -- 可选配置，允许 Store 在应用程序启动时自动加载其数据。要激活它，请在配置右侧的框中打勾，这将将 autoLoad 设置为 true。为了使其工作，请确保取消选中 buffered 配置。

model -- “值”字段显示已添加到项目中的模型列表。选择一个模型以与此 Store 关联。当模型已添加到项目中时启用。请参阅本指南的下一节，了解如何添加和配置模型。下面“将 Stores 与模型和视图关联”部分更详细地描述了将 Stores 与模型关联的过程。

在代理中，设置以下配置

url -- 从中加载远程数据的 URL。通常，代理中的 url 配置设置为相对路径。在 JsonP 代理等情况下，它也可以是绝对路径。除非 URL 能够解析，否则您无法在 Architect 中加载数据。如果 URL 是相对路径，则需要设置 Architect 设置中的 URL 前缀。这仅适用于加载远程数据的代理，对于本地代理（如内存代理）则不需要。

在读取器中，设置以下内容

root/rootProperty -- 指定响应数据中包含行对象集合的属性或元素（如果该集合不在根目录）。不适用于数组读取器。

添加自定义 Store 配置

除了显示的其他 Store 配置外，还可以通过在配置顶部的“筛选”字段中键入配置名称并单击“添加”来添加自定义配置。自定义配置将出现在配置面板中，您可以在其中进行设置。

细节提示

在大多数情况下，此处讨论的配置是您需要使用的全部内容，但如果您需要，还有其他选项可用

• 如果标准的 Store 类型都不能满足您的应用程序的需求，您可以使用通用 Store。要添加通用 Store，请单击添加按钮并单击 Store。Store 将添加到 Stores 节点。没有为通用 Store 定义默认代理和读取器，但如果需要，您可以为其添加代理和读取器。在检查器中选择 Store 后，查找代理配置。单击右侧的添加按钮，然后选择要添加到 Store 的代理类型。它将出现在检查器中的 Store 下方。在那里选择代理，查找读取器配置，然后使用添加按钮将读取器添加到 Store。

将数据加载到 Store 中

一旦 Store 成功配置，感叹号将不再出现在检查器中 Store 的旁边，并且 Store 准备好加载数据。为此，请右键单击 Store，然后从出现的上下文菜单中选择“加载数据”。如果 Store 成功加载了数据，Architect 会在检查器中 Store 的旁边显示一个眼睛图标。将光标放在眼睛上，Architect 会显示一条消息，说明加载了多少条记录。单击眼睛以在单独的窗口中以原始格式查看数据。

如果 Store 无法加载数据，Architect 会在 Store 旁边显示一个感叹号。单击感叹号以打开错误消息，其中建议如何操作以使 Store 能够加载数据。

将 Stores 与视图关联

在创建具有关联模型的 Store 之后，需要将 Store 绑定到视图组件以显示数据。

要将 Store 绑定到视图，请在检查器中选择一个视图以在画布中查看它。在画布中，单击视图上的弹出配置按钮以显示您在项目中创建的 Stores 列表。选择一个 Store 以将其绑定到视图。您也可以在选择视图组件时，通过在配置面板中查找“store”配置来执行此操作。

请注意，只有某些视图组件类型可以绑定到数据存储。其中一些是

• 数据视图
• 图表
• 列表
• 网格面板
• 树状面板

您可能需要为视图设置其他配置，以便其正确显示数据。例如，如果您使用网格，则需要将网格列链接到 Store 中的相应字段。您可以通过右键单击检查器中的网格并选择“自动列”来执行此操作。如果您使用图表，则必须设置其系列和轴配置以与将填充它的数据类型相对应。

使用数据库

Sencha 框架提供了知道如何加载 JSON 或 XML 格式数据的读取器。如果您的数据存储在数据库中，则可以使用任何服务器端语言来生成可以传递到您的 Sencha Architect 应用程序的 JSON 或 XML 文件。

使用模拟数据

Architect 支持模拟数据功能，该功能允许您将“虚拟数据”输入到 Store 或视图组件中，以便您可以在画布上看到它的外观，但数据不包含在您的应用程序的生成代码中；您仍然可以将您的 Store 设置为从服务器拉取其数据。这使您能够在访问和存储数据困难或成本高昂时模拟数据以进行测试，例如当需要其他信息（例如登录令牌或地理位置）才能访问真实数据时。

有两种不同的模拟数据功能可用

• 您创建要使用的模拟数据（在 Architect 2.2 及更高版本中可用）
• Architect 生成符合您已定义的模型和 Store 的数据（在 Architect 3.0 及更高版本中可用）

选择“Tasks” store，找到“data”配置，然后单击“编辑”图标。

这将弹出一个代码编辑器面板，其中包含一个 JSON 格式的对象数组，这些对象对应于显示的信息。

您可以编辑此信息；例如，尝试将第一项更改为“Write a song”。当您完成所需的更改后，选中编辑器右上角标记为“模拟数据”的复选框。

现在返回设计视图；您更改的信息将显示出来。

从 Architect 3 开始，Architect 可以根据与此 Store 关联的模型中定义的字段和类型为您生成数据。为此，请单击“生成数据”按钮。Architect 显示要使用的字段和类型，并允许您选择要创建的记录数。

您可以修改用于每个字段的类型，以微调生成的数据。例如，如果您的模型具有类型为“string”的“first_name”字段，那么您可以选择为该字段生成名字，而不是随机字符串。请注意，此处选择的类型仅影响生成的模拟数据；为模型定义的字段和类型不会更改。

完成类型选择后，单击“生成数据”按钮；Architect 显示它已创建的 JSON 文件。如果您愿意，您可以编辑此信息。当您返回设计视图时，您将看到显示中使用的新数据。

示例 1：Json Store

第一个示例向您展示如何构建 Json Store。Store 将需要一些数据，因此创建一个包含要加载到项目中的数据的虚拟 JSON 文件。对于此示例，创建一个名为 customers.json 的文件，其中包含以下内容

{
    "customers": [
    {"name": "Bradley Banks", "age": 36, "zip": "10573"},    
    {"name": "Sarah Carlson", "age": 59, "zip": "48075"},
    {"name": "Annmarie Wright", "age": 53, "zip": "48226"}
    ]
}

将 customers.json 文件保存在项目 URL 前缀指定的主机上。例如，如果 URL 前缀设置为 https://127.0.0.1，请使该文件在 https://127.0.0.1/data/customers.json 上可用。

添加和配置模型

向项目添加一个模型，并将其 userClassName 设置为您容易记住的名称。使用与 Store 名称相似的名称更容易，因为您将在项目中关联 Store 和模型。

现在向模型添加三个字段，每个字段对应一个要从客户数组中的元素访问的 name:value 对。您可以使用“配置”中的“字段”属性添加字段。将第一个字段的名称设置为 name。将第二个字段的名称设置为 age，并将其类型设置为 int。设置字段类型可以使字段能够正确排序。将第三个字段的名称设置为 zipcode。由于这与在 Json 文件中引用此值的名称不同，因此还需要设置字段的 mapping 属性，在本例中为 zip。

添加和配置 Json Store

在 Architect 中，转到检查器，单击添加按钮（“+”），然后选择 Json Store 以将 Store 及其读取器和代理添加到项目中。请注意，Architect 在检查器中的 Store 旁边显示一个感叹号，指示它尚未准备好加载数据。

在检查器中选择 Json Store。在“配置”中将 userClassName 设置为容易记住的名称。此示例数据中的对象类型是客户，因此模型的良好名称是“Customer”，而 Store 的良好名称是“Customers”。这是一个很好的实践：将模型命名为描述它是哪种类型的“事物”，并将 Store 命名为该名称的复数形式。在 autoLoad 配置旁边的框中打勾，以便 Store 自动加载数据。

在检查器中选择代理，然后在“配置”中将其 url 属性设置为项目 URL 前缀指定的主机上源文件的位置。在本例中，Json Store 已保存在 localhost 的 data 目录中，因此将 url 属性设置为 data/customers.json。

选择读取器，并将其 root 配置设置为 customers。这与您刚刚创建的 Json 文件中指定的数组名称匹配。

关联模型和 Store

现在将模型与 Store 关联。返回检查器中的 Store。找到其模型配置，然后在“配置”下的“值”中打开其右侧的字段。查找您刚刚添加的模型的名称并选择它。

如果您已正确完成所有步骤，则检查器不再在 Store 旁边显示感叹号，这意味着它现在可以从 customers.json 文件加载数据。

加载数据

在选中 Store 的情况下，右键单击并选择“加载数据”。当从源成功加载数据时，Architect 会在检查器中的 Store 旁边显示一个眼睛图标。将光标放在眼睛上，Architect 会显示一条消息，说明加载了多少条记录。单击眼睛以在单独的窗口中以原始格式查看数据。

如果 Store 无法加载数据，Architect 会在 Store 旁边显示一个感叹号。单击感叹号以打开错误消息，其中建议如何操作以使 Store 能够加载数据。纠正问题，然后尝试再次加载数据。

示例 2：Array Store

下一个示例展示如何构建数组 Store。对于其数据，创建一个名为 contacts.json 的 Json 文件，其中包含以下数据数组

[
    ["Ace Supplies", "Emma Knauer", "555-3529"],
    ["Best Goods", "Joseph Kahn", "555-8797"],
    ["First Choice", "Matthew Willbanks", "555-4954"]
]

将 contacts.json 文件保存在项目 URL 前缀指定的主机上。例如，如果 URL 前缀设置为 https://127.0.0.1，请使该文件在 https://127.0.0.1/data/contacts.json 上可用。

添加和配置模型

向项目添加一个模型，并将其 userClassName 设置为您容易记住的名称。向模型添加三个字段，每个字段对应于应用程序需要从源文件中的行数组中访问的元素。将这三个字段分别命名为 name、contact 和 phone。

添加和配置 Array Store

向项目添加一个 Array Store，以及其读取器和代理，然后在检查器中选择 Array Store。将 userClassName 和 storeId 设置为相同的名称，并选中 autoLoad 配置旁边的框。将代理的 url 属性设置为项目 URL 前缀指定的主机上源文件的位置，在本例中为 data/contacts.json。

关联模型和 Store

在检查器中选择数组 Store，并将其模型配置设置为您刚刚添加的模型的名称。

加载数据

在选中 Store 的情况下，右键单击并选择“加载数据”。单击眼睛以在单独的窗口中以原始格式查看数据。如果 Store 无法加载数据，请单击感叹号以找出原因。纠正问题并加载数据。

示例 3：XML Store

本示例展示如何使用 XML Store。对于数据，创建一个名为 products.xml 的 XML 文件，其中包含以下数据

<?xml version="1.0" encoding="UTF-8"?>
<Products xmlns="http://example.org">
    <Product>
        <Name>Widget</Name>
        <Price>11.95</Price>
            <ImageData>
                <Url>widget.png</Url>
                <Width>300</Width>
                <Height>400</Height>
            </ImageData>
    </Product>
    <Product>
        <Name>Sprocket</Name>
        <Price>5.95</Price>
            <ImageData>
                <Url>sc.png</Url>
                <Width>300</Width>
                <Height>400</Height>
            </ImageData>
    </Product>
    <Product>
        <Name>Gadget</Name>
        <Price>19.95</Price>
            <ImageData>
                <Url>widget.png</Url>
                <Width>300</Width>
                <Height>400</Height>
            </ImageData>
    </Product>
</Products>

将 products.xml 文件保存在项目 URL 前缀指定的主机上，例如 https://127.0.0.1/data/products.xml。

添加和配置模型

创建一个模型，命名它，并向其添加三个字段。将第一个字段的名称设置为 name，并将其 mapping 配置设置为 Name。请注意，mapping 区分大小写，并且必须与元素名称匹配。将第二个字段的名称设置为 price，其 mapping 设置为 Price，类型设置为 float。将第三个字段的 name 属性设置为 imageUrl，并将 mapping 属性设置为 ImageData > Url。请注意，这使用 DomQuery 选择器来访问 ImageData 的子元素 Url。

添加和配置 XML Store

向项目添加一个 Xml Store，及其代理和读取器。将代理的 url 配置设置为项目 URL 前缀指定的主机上源文件的位置，例如 data/products.xml。将读取器的 record 配置设置为包含要加载的数据的 XML 元素的名称，在本例中为 Product。

关联模型和 Store，加载数据

在检查器中选择 XML Store，并将其模型配置设置为您刚刚添加的模型的名称。像在前面的示例中一样加载数据。