本教程深入探讨Ext JS框架中如何通过Store的Proxy发送AJAX请求，并利用自定义Reader处理响应数据。文章解决了Ext.form.Panel直接绑定Store的常见误区，详细演示了如何手动创建和加载Store以触发数据请求。此外，还提供了自定义Reader中getResponseData方法的实现细节，指导开发者如何解析和结构化服务器响应，确保数据正确加载到Store中，并简要提及了如何在不同组件间访问Store数据。
理解Ext JS Store、Proxy与Reader机制
在ext js应用中，数据管理的核心在于ext.data.store。store充当着客户端数据缓存的角色，它与服务器的通信则通过ext.data.proxy.proxy完成。当store需要从服务器获取数据时，proxy会负责发送请求；而当服务器返回数据后，ext.data.reader.reader则负责解析响应，将原始数据转换为store能够理解和存储的ext.data.model实例。
配置Store与Ajax Proxy
一个典型的Store配置会指定其使用的Proxy类型和数据读取器。例如，使用ajax类型的Proxy可以向指定的URL发送HTTP请求。
Ext.define("ModernApp.view.form.FormViewStore", { extend: "Ext.data.Store", alias: "store.formviewstore", // 使用'store.'前缀作为别名 proxy: { type: "ajax", url: "https://jsonplaceholder.typicode.com/posts", // 目标API地址 reader: { type: "myreader", // 指定自定义读取器 }, },});
在这个配置中，url定义了数据请求的目标地址，reader属性则指向了一个自定义的读取器，其别名为myreader。
实现自定义数据读取器
自定义数据读取器通常继承自Ext.data.reader.Json或Ext.data.reader.Xml，并重写getResponseData方法。这个方法是数据解析的关键，它接收原始的服务器响应对象，并负责将其转换为Store期望的格式（通常是一个包含success状态和data或results数组/对象的JavaScript对象）。
Ext.define("ModernApp.view.form.reader.Json", { extend: "Ext.data.reader.Json", alias: "reader.myreader", // 使用'reader.'前缀作为别名 getResponseData: function (response) { let decodedData; try { // 尝试解析原始响应文本为JSON对象 decodedData = Ext.JSON.decode(response.responseText); } catch (e) { console.error("JSON解析失败:", e); // 返回一个表示失败的结构 return { success: false, errors: [{ message: "无效的JSON响应" }] }; } // 根据HTTP状态码和解析后的数据构建Store期望的格式 if (response.status === 200) { // 假设API成功时直接返回数据，我们将其包装在'results'中 return { success: true, results: decodedData, // 这里的decodedData可以是单个对象或数组 }; } else { // 处理非200状态码，假设decodedData可能包含错误信息 return { success: false, errors: decodedData.errors || [{ message: `服务器错误: ${response.status}` }], }; } },});
在getResponseData方法中，我们首先尝试使用Ext.JSON.decode解析response.responseText。然后，根据HTTP状态码和解析结果，构造一个包含success标志和results（或data）属性的对象。这是Store期望的格式，以便它能正确地加载数据。
Ext JS组件与Store的交互：解决常见误区
一个常见的误解是，所有Ext JS组件都可以通过简单的store配置直接绑定Store。实际上，并非所有组件都支持此配置。例如，Ext.form.Panel组件设计用于显示和编辑单个Ext.data.Model实例，而不是像Ext.grid.Panel那样直接管理一个Store的数据集合。因此，直接在Ext.form.Panel中配置store: { type: “formviewstore” }是无效的，并不会自动触发数据加载。
手动加载Store以触发请求
要触发Store的AJAX请求，需要手动创建Store实例并调用其load()方法。这可以在组件的控制器中，或在某个事件处理器中完成。
Ext.define("ModernApp.view.form.FormView", { extend: "Ext.form.Panel", xtype: "formview", title: "Custom Form", controller: "formviewcontroller", // ... 其他配置 ... buttons: [ { text: "发送请求", handler: function () { // 创建FormViewStore实例 const store = Ext.create("ModernApp.view.form.FormViewStore"); // 调用load()方法触发AJAX请求 store.load({ callback: function (records, operation, success) { if (success) { console.log("数据加载成功:", records); // 假设我们只需要第一个记录来填充表单 if (records && records.length > 0) { this.up("formview").setRecord(records[0]); // 将第一个记录设置到表单中 } } else { console.error("数据加载失败:", operation.getError()); } }, scope: this, // 确保callback中的this指向当前按钮 }); }, }, { text: "取消", handler: "onCancel", }, ], // ... 其他items和listeners ...});
在上述示例中，当“发送请求”按钮被点击时，我们动态创建了FormViewStore的一个实例，并调用了store.load()。load()方法可以接受一个callback函数，用于处理请求成功或失败后的逻辑，例如将加载到的数据填充到表单中。
在组件控制器中管理Store加载
更推荐的做法是在组件的控制器中管理Store的生命周期和数据加载逻辑，以保持视图和逻辑的分离。
// ModernApp.view.form.FormViewController.jsExt.define("ModernApp.view.form.FormViewController", { extend: "Ext.app.ViewController", alias: "controller.formviewcontroller", onFormRender: function () { console.log("表单渲染完成"); this.loadFormData(); }, loadFormData: function () { // 获取或创建Store实例 const store = Ext.create("ModernApp.view.form.FormViewStore"); store.load({ callback: function (records, operation, success) { if (success) { console.log("表单数据加载成功:", records); if (records && records.length > 0) { this.getView().setRecord(records[0]); // 将第一个记录设置到当前表单 } } else { console.error("表单数据加载失败:", operation.getError()); } }, scope: this, // 确保callback中的this指向控制器 }); }, onSubmit: function () { // 处理表单提交逻辑 const form = this.getView(); const record = form.getRecord(); if (record) { // 假设record已经加载，可以进行修改并保存 record.set(form.getValues()); // record.save(); // 如果需要将修改保存回服务器 } else { console.warn("没有记录可提交。"); } }, onCancel: function () { // 处理取消逻辑 const form = this.getView(); form.reset(); // 重置表单字段 },});
在这个控制器中，onFormRender监听表单的afterrender事件，并在表单渲染完成后调用loadFormData方法来加载数据。这种方式使得数据加载逻辑更加集中和可控。
在不同组件间访问Store数据
一旦Store被成功加载，其包含的数据就可以通过Store实例进行访问。如果需要在一个组件中加载数据，并在另一个组件中使用这些数据，有几种方法可以实现：
通过Store ID引用： 如果Store在应用中是唯一的且需要在多个地方访问，可以为其指定一个storeId。然后，其他组件可以通过Ext.getStore(‘myStoreId’)来获取Store实例。
// FormViewStore.jsExt.define("ModernApp.view.form.FormViewStore", { extend: "Ext.data.Store", alias: "store.formviewstore", storeId: "myFormDataStore", // 添加一个唯一的storeId // ...});// 在NavView组件中访问Ext.define("ModernApp.view.nav.NavView", { extend: "Ext.Panel", xtype: "navview", listeners: { afterrender: function () { const store = Ext.getStore("myFormDataStore"); if (store && store.isLoaded()) { console.log("NavView访问到的数据:", store.getData().items); // ... 使用数据更新NavView ... } else if (store) { // 如果Store尚未加载，可以监听其load事件 store.on("load", function (s, records) { console.log("NavView监听到的数据:", records); // ... }, this, { single: true }); // 只监听一次 store.load(); // 如果NavView是第一个需要数据的，也可以在此处触发加载 } }, },});
通过组件引用传递： 可以在一个组件中加载Store，然后将Store实例或其数据作为参数传递给另一个组件。
使用ViewModel： 对于更复杂的应用，可以利用Ext.app.ViewModel在组件层级之间共享数据。ViewModel可以绑定到Store，并在其关联的视图或子视图中提供数据。
注意事项与最佳实践
错误处理： 在getResponseData和Store的load回调中，务必包含健壮的错误处理逻辑，以应对网络问题、服务器错误或无效的JSON响应。数据格式： 确保自定义Reader返回的数据格式与Store期望的格式（通常是{ success: boolean, results: Array异步操作： AJAX请求是异步的。所有依赖于请求结果的操作都应放在load回调函数中执行，或使用Promise等异步机制。调试： 利用浏览器开发工具的网络选项卡（Network tab）检查AJAX请求是否成功发送，以及服务器返回的响应内容。同时，在getResponseData方法中添加console.log语句可以帮助调试数据解析过程。
总结
通过本教程，我们深入理解了Ext JS中Store、Proxy和自定义Reader协同工作以处理AJAX请求的机制。关键在于正确配置Store的Proxy和Reader，并在适当的时机手动调用Store的load()方法来触发数据请求。特别是对于Ext.form.Panel这类不直接绑定Store的组件，手动加载Store并在回调中处理数据填充是标准做法。同时，通过storeId或控制器层级管理，可以有效地在不同组件间共享和访问加载后的数据，构建功能完善的Ext JS应用。
以上就是Ext JS AJAX请求：通过代理与自定义读取器高效管理数据的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526682.html
微信扫一扫 
支付宝扫一扫 
