在 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 方法来解析原始响应。
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: 原始的请求对象。
您的任务是在这个方法中：
- 从 response 对象中提取原始数据。
- 解析数据（例如，使用 Ext.JSON.decode 解析 JSON 字符串）。
- 将解析后的数据封装成一个对象，该对象必须包含 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 组件中使用。这通常涉及到两种情况：
- 直接访问 Store 实例: 如果 NavView 和 FormView 都属于同一个父组件，或者 FormViewStore 是一个全局 Store，NavView 可以通过 Ext.getStore('myGlobalStoreId') 或 this.up('parentComponent').getViewModel().getStore('myStore') 来获取 Store 实例，然后访问其数据。
- 通过 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 应用中管理数据流，实现与后端服务的无缝集成。
