本文深入探讨 Ext JS 中如何有效管理数据，特别是在 Ext.form.Panel 中正确使用数据存储 (Store) 和通过 AJAX 代理发送请求。我们将详细讲解如何手动创建和加载 Store，以及如何利用自定义数据读取器 (Reader) 对服务器响应进行灵活处理和转换，同时提供在不同组件间访问 Store 数据的策略。
1. Ext JS 数据存储 (Store) 与代理 (Proxy) 基础
在 ext js 应用中，ext.data.store 是管理客户端数据集合的核心组件。它通常与数据代理 (proxy) 配合使用，负责与服务器进行数据交互。ext.data.proxy.ajax 是最常用的代理类型，用于通过 ajax 请求获取或提交数据。
一个典型的 Store 配置包括：
extend: ‘Ext.data.Store’：继承自基础 Store 类。alias：为 Store 定义一个别名，方便通过 type 引用。proxy：配置数据代理，指定请求类型、URL 和数据读取器。
示例：FormViewStore.js
Ext.define("ModerdApp.view.form.FormViewStore", { extend: "Ext.data.Store", alias: "store.formviewstore", // 推荐使用 'store.' 前缀，方便通过 type 引用 proxy: { type: "ajax", url: "https://jsonplaceholder.typicode.com/posts", // 目标 API 地址 reader: { type: "myreader", // 指定自定义读取器 }, },});
2. Ext.form.Panel 的 Store 使用注意事项
一个常见的误区是尝试直接在 Ext.form.Panel 的配置中设置 store 属性，例如 store: { type: “formviewstore” }。然而，Ext.form.Panel 组件本身并没有名为 store 的配置项来直接绑定一个数据集合。Ext.form.Panel 通常用于展示和编辑单个数据模型 (Model) 的字段，而不是一个数据集合。像 Ext.grid.Panel 这样的组件才拥有 store 配置来管理其显示的数据行。
如果需要在 Ext.form.Panel 中使用 Store 来获取数据（例如，填充表单字段或作为下拉框的数据源），你需要手动创建并加载 Store。
手动加载 Store 的方法：
你可以通过控制器或组件的事件处理函数来创建并加载 Store。以下示例展示了如何在按钮点击事件中加载 Store：
// FormView.js (部分代码)Ext.define("ModernApp.view.form.FormView", { extend: "Ext.form.Panel", xtype: "formview", title: "Custom Form", controller: "formviewcontroller", // 确保为组件配置了控制器 buttons: [ { text: "发送请求并加载数据", handler: function() { // 1. 创建 Store 实例 const store = Ext.create('ModerdApp.view.form.FormViewStore'); // 2. 加载 Store，这将触发 AJAX 请求 store.load({ callback: function(records, operation, success) { if (success) { console.log('数据加载成功:', records); // 这里可以处理加载到的数据，例如填充表单字段 // 如果 FormView 是为了显示单个记录，可以这样： // if (records.length > 0) { // this.getForm().loadRecord(records[0]); // 将第一条记录加载到表单 // } } else { console.error('数据加载失败:', operation.getError()); } }, scope: this // 确保 callback 中的 this 指向 FormView 实例 }); }, }, { text: "取消", handler: "onCancel", }, ], // ... 其他配置});
如果需要在组件渲染后立即加载数据，可以在其 afterrender 监听器中通过控制器来触发加载：
// FormView.js (部分代码)Ext.define("ModernApp.view.form.FormView", { // ... listeners: { afterrender: "onFormRender", }, // ...});// FormViewController.jsExt.define("ModernApp.view.form.FormViewController", { extend: "Ext.app.ViewController", alias: "controller.formviewcontroller", onFormRender: function() { console.log("onFormRender: 准备加载数据..."); this.loadFormData(); }, loadFormData: function() { const store = Ext.create('ModerdApp.view.form.FormViewStore'); store.load({ callback: function(records, operation, success) { if (success) { console.log('数据通过控制器加载成功:', records); // 处理数据，例如将第一条记录加载到表单 // if (records.length > 0) { // this.getView().getForm().loadRecord(records[0]); // } } else { console.error('数据通过控制器加载失败:', operation.getError()); } }, scope: this // 确保 callback 中的 this 指向控制器实例 }); }, // ... 其他方法});
3. 实现自定义数据读取器 (Custom Reader)
自定义数据读取器允许你对服务器返回的原始数据进行预处理和转换，以符合 Store 模型的要求。通过继承 Ext.data.reader.Json 或其他读取器类型，并重写 getResponseData 方法，你可以完全控制数据解析过程。
getResponseData 方法详解：
getResponseData 方法接收服务器响应对象作为参数，并期望返回一个包含 success 状态和 data (或 results) 字段的对象，该对象将被 Store 用于创建模型实例。
示例：FormViewReader.js (自定义读取器)
Ext.define("ModernApp.view.form.reader.Json", { extend: "Ext.data.reader.Json", alias: "reader.myreader", // 推荐使用 'reader.' 前缀，方便通过 type 引用 /** * 重写此方法以处理服务器响应。 * @param {Object} response 服务器响应对象，包含 status, responseText 等。 * @return {Object} 格式化的数据对象，包含 success 和 results/data。 */ getResponseData: function (response) { console.log("原始服务器响应:", response); let decodedJson; try { // 尝试解码 responseText // Ext.JSON.decode 的第二个参数为 true 表示如果解析失败返回 null decodedJson = Ext.JSON.decode(response.responseText, true); } catch (e
以上就是Ext JS 数据管理：实现 AJAX 代理请求与自定义数据读取器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526722.html
微信扫一扫 
支付宝扫一扫 
