本文深入探讨 Ext JS 框架中通过 AJAX 代理发送数据请求、实现自定义数据读取器以及管理表单数据加载的核心技术。我们将详细解析 Ext.form.Panel 与 Ext.data.Store 之间的交互差异，并通过示例代码演示如何手动加载数据、配置 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.jsExt.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.jsExt.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.jsExt.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 应用中管理数据流，实现与后端服务的无缝集成。
以上就是掌握 Ext JS：通过代理发送 AJAX 请求与实现自定义数据读取器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526825.html
微信扫一扫 
支付宝扫一扫 
