掌握 Ext JS：通过代理发送 AJAX 请求与实现自定义数据读取器

在 ext js 应用开发中，数据管理是核心环节之一。ext.data.store 结合 ext.data.proxy.ajax 和自定义数据读取器是实现与后端服务高效交互的强大组合。然而，初学者常会在组件与数据存储的绑定、请求的触发以及响应的处理上遇到困惑。本教程将围绕这些关键点展开，提供一套清晰的实践指南。

理解 Ext JS 中的数据流：Store、Proxy 与 Reader

在 Ext JS 中，数据通常通过以下组件链进行管理和传输：

• Store (数据存储): 负责在客户端管理数据集合。它不直接与服务器通信，而是通过代理来完成。
• Proxy (代理): 定义了 Store 如何与远程数据源进行通信，例如通过 AJAX 请求。它封装了请求的 URL、方法、参数等细节。
• Reader (读取器): 负责解析从服务器接收到的原始数据，并将其转换为 Ext JS Store 可以理解和使用的模型实例。

Ext.form.Panel 与 Ext.data.Store 的区别

一个常见的误区是将 Ext.form.Panel 与 Ext.grid.Panel 等同看待，认为它们都能通过 store 配置直接绑定一个数据存储。实际上，Ext.form.Panel 并没有名为 store 的配置项。Ext.form.Panel 通常用于显示和编辑单个数据记录，而不是一个数据集合。因此，如果您希望为表单加载数据，需要手动创建并加载 Ext.data.Store，然后将加载到的数据记录填充到表单字段中。

例如，以下代码片段在 Ext.form.Panel 中配置 store 是无效的：

Ext.define("ModernApp.view.form.FormView", {
  extend: "Ext.form.Panel",
  xtype: "formview",
  // ... 其他配置
  store: { type: "formviewstore" }, // 此配置对 Ext.form.Panel 无效
  // ...
});

正确的做法是手动创建并加载 Store，然后将数据绑定到表单。

通过代理发送 AJAX 请求并手动加载数据

要通过代理发送 AJAX 请求，首先需要定义一个 Ext.data.Store，并为其配置一个 Ext.data.proxy.Ajax。

1. 定义数据存储 (Store)

创建一个 FormViewStore，指定其代理类型为 ajax，并设置请求的 URL。同时，这里也指定了一个自定义的读取器 myreader。

// ModernApp/view/form/FormViewStore.js
Ext.define("ModerdApp.view.form.FormViewStore", {
  extend: "Ext.data.Store",
  alias: "store.formviewstore", // 使用 store. 前缀作为 alias
  proxy: {
    type: "ajax",
    url: "https://jsonplaceholder.typicode.com/posts", // 示例 API
    reader: {
      type: "myreader", // 指定自定义读取器
    },
  },
  // 可以选择定义模型，如果数据结构已知
  // model: 'ModernApp.model.MyDataModel'
});

2. 手动创建和加载 Store

由于 Ext.form.Panel 不会自动加载 Store，您需要在适当的时机（例如，在组件渲染后或按钮点击时）手动创建 Store 并调用其 load() 方法。

以下示例演示了在一个按钮的 handler 中如何创建并加载 FormViewStore：

// ModernApp/view/form/FormView.js
Ext.define("ModernApp.view.form.FormView", {
  extend: "Ext.form.Panel",
  xtype: "formview",
  title: "Custom Form",
  controller: "formviewcontroller",
  // ... 其他配置
  buttons: [
    {
      text: "发送请求并加载数据",
      handler: function () {
        // 创建 Store 实例
        const store = Ext.create("store.formviewstore"); // 使用 alias 创建
        // 加载 Store，这将触发 AJAX 请求
        store.load({
          callback: function (records, operation, success) {
            if (success) {
              console.log("数据加载成功:", records);
              // 如果是表单，通常只加载一条记录
              if (records.length > 0) {
                this.up("formview").setValues(records[0].getData()); // 将第一条记录的数据填充到表单
              }
            } else {
              console.error("数据加载失败:", operation.getError());
            }
          },
          scope: this, // 确保回调函数中的 this 指向当前组件
        });
      },
    },
    {
      text: "取消",
      handler: "onCancel",
    },
  ],
  // ... 其他 items 和 listeners
});

当上述按钮被点击时，store.load() 会触发一个 AJAX 请求到 https://jsonplaceholder.typicode.com/posts，并通过 myreader 来处理响应。

实现自定义数据读取器 (Custom Reader)

自定义数据读取器允许您灵活地处理服务器返回的任何格式的数据。通过扩展 Ext.data.reader.Json 或其他读取器，您可以重写 getResponseData 方法来解析原始响应。

通义视频

通义万相AI视频生成工具

70

查看详情

1. 定义自定义读取器

创建一个名为 Json 的自定义读取器，并为其指定别名 myreader。

// ModernApp/view/form/reader/Json.js
Ext.define("ModernApp.view.form.reader.Json", {
  extend: "Ext.data.reader.Json",
  alias: "reader.myreader", // 使用 reader. 前缀作为 alias

  /**
   * 重写 getResponseData 方法来处理服务器响应。
   * 这个方法接收原始的响应对象，并需要返回一个包含 'success' 状态和 'data' (或 'results') 的对象。
   * @param {Object} response 原始的服务器响应对象
   * @returns {Object} 格式化后的数据对象
   */
  getResponseData: function (response) {
    console.log("原始响应对象:", response);

    let decodedJson;
    try {
      // 尝试解析响应文本
      // 注意：response.request.result.responseText 可能不存在，
      // 更可靠的是直接使用 response.responseText 或 response.responseJson
      decodedJson = Ext.JSON.decode(
        response.responseText || response.request.result.responseText,
        true
      ); // true 表示如果解析失败返回 null
    } catch (e) {
      console.error("解析 JSON 响应失败:", e);
      return {
        success: false,
        message: "JSON 解析错误",
        errors: e.message,
      };
    }

    // 根据 HTTP 状态码判断请求是否成功
    if (response.status >= 200 && response.status < 300) {
      // 假设服务器返回的数据直接是数组或符合 Ext JS Store 的格式
      // 如果服务器返回的是一个数组，可以直接作为 results 返回
      // 如果服务器返回的是 { data: [...] }，则需要提取 data 字段
      return {
        success: true,
        data: decodedJson, // 将解析后的数据作为 'data' 字段返回
      };
    } else {
      // 请求失败，返回错误信息
      return {
        success: false,
        message: "服务器请求失败",
        errors: decodedJson || response.statusText,
      };
    }
  },
});

2. getResponseData 方法详解

getResponseData 方法是自定义读取器的核心。它接收一个 response 对象作为参数，该对象包含了 AJAX 请求的详细信息，例如：

• response.responseText: 服务器返回的原始文本数据。
• response.responseJson: 如果服务器返回的是 JSON 且 Ext JS 已自动解析，则为解析后的 JSON 对象。
• response.status: HTTP 状态码（如 200, 404, 500）。
• response.statusText: HTTP 状态文本。
• response.request: 原始的请求对象。

您的任务是在这个方法中：

1. 从 response 对象中提取原始数据。
2. 解析数据（例如，使用 Ext.JSON.decode 解析 JSON 字符串）。
3. 将解析后的数据封装成一个对象，该对象必须包含 success 属性（布尔值）和 data 或 results 属性（包含实际数据记录）。如果请求失败，可以包含 errors 属性。

示例代码中的 getResponseData 逻辑说明：

• 它首先尝试使用 Ext.JSON.decode 解析 response.responseText。
• 然后，根据 response.status 判断请求是否成功。
• 如果成功，它返回一个 { success: true, data: decodedJson } 的结构。
• 如果失败，它返回一个 { success: false, message: "...", errors: ... } 的结构。

这种结构是 Ext JS Store 读取器所期望的，它允许 Store 正确地处理数据和错误。

数据在组件间共享的考量

原始问题中提到了如何在 FormViewStore 中获取数据后，在 NavView 组件中使用。这通常涉及到两种情况：

1. 直接访问 Store 实例: 如果 NavView 和 FormView 都属于同一个父组件，或者 FormViewStore 是一个全局 Store，NavView 可以通过 Ext.getStore('myGlobalStoreId') 或 this.up('parentComponent').getViewModel().getStore('myStore') 来获取 Store 实例，然后访问其数据。
2. 通过 ViewModel 共享数据: Ext JS 的 ViewModel 是在组件层级之间共享数据的推荐方式。您可以在父组件的 ViewModel 中定义一个 Store，然后子组件可以通过 bind 配置来访问和使用这个 Store。

对于 Ext.form.Panel，通常是加载一条记录到表单中，而不是整个 Store。如果您需要在 NavView 中显示这条记录的某个字段，可以在 FormView 加载数据后，将该记录的特定数据传递给 NavView，或者将该记录本身设置为 NavView 的 ViewModel 的一部分。

总结与最佳实践

• Ext.form.Panel 不直接支持 store 配置。 需要手动创建和加载 Ext.data.Store。
• 手动加载 Store: 使用 Ext.create('store.yourStoreAlias').load() 来触发 AJAX 请求。
• 自定义读取器 (getResponseData): 是处理服务器原始响应的关键。确保返回一个包含 success 和 data (或 results) 属性的对象。
• 错误处理: 在 getResponseData 中加入 try-catch 块来处理 JSON 解析错误，并在 store.load() 的 callback 中处理请求失败的情况。
• 调试: 利用浏览器的开发者工具（网络标签页）检查 AJAX 请求和响应，使用 console.log 在 getResponseData 中输出原始响应对象，有助于理解数据结构和调试问题。

通过掌握这些技术，您将能够更有效地在 Ext JS 应用中管理数据流，实现与后端服务的无缝集成。

以上就是掌握 Ext JS：通过代理发送 AJAX 请求与实现自定义数据读取器的详细内容，更多请关注php中文网其它相关文章！