本文详细介绍了如何在Ext JS应用中，特别是针对Ext.form.Panel，通过配置AJAX代理、实现自定义数据读取器来发送网络请求并处理返回数据。内容涵盖了Store的正确配置、自定义Reader的实现细节，以及如何手动触发数据加载，并强调了组件与Store之间的数据交互方式及注意事项。
1. Ext JS数据加载基础：Store与Proxy
在ext js框架中，ext.data.store是管理客户端数据集合的核心组件。它充当了数据模型（ext.data.model）的容器，并提供了排序、过滤、分组等功能。ext.data.store通过proxy（代理）与后端服务进行数据交互，而proxy定义了数据传输的方式，例如通过ajax请求、localstorage或sessionstorage等。
对于从远程服务器获取数据，最常用的是ajax类型的proxy。它允许我们指定请求的URL，并配置数据读取器（reader）来解析服务器返回的响应。
需要注意的是，Ext.form.Panel与Ext.grid.Panel在Store的使用上存在显著差异。Ext.grid.Panel通常直接绑定一个Store来显示多条记录，而Ext.form.Panel的设计理念是编辑或显示单个数据模型实例。因此，Ext.form.Panel没有直接的store配置项，需要手动创建并加载Store，然后将Store中的数据（通常是第一条记录）赋值给表单字段。
以下是一个配置了AJAX代理和自定义读取器的Store示例：
// FormViewStore.jsExt.define("ModerdApp.view.form.FormViewStore", { extend: "Ext.data.Store", alias: "store.formviewstore", // 使用别名方便引用 proxy: { type: "ajax", url: "https://jsonplaceholder.typicode.com/posts", // 目标API地址 reader: { type: "myreader", // 指定使用名为 'myreader' 的自定义读取器 }, }, // 可以定义model，但对于简单数据，reader可以直接处理 // model: 'ModerdApp.model.MyDataModel'});
在这个示例中，我们定义了一个名为FormViewStore的Store，它继承自Ext.data.Store。proxy配置项指定了type为ajax，url为数据请求的端点。最关键的是reader配置，我们将其type设置为myreader，这意味着我们将使用一个自定义的读取器来解析从url获取到的数据。
2. 实现自定义数据读取器（Custom Reader）
当后端服务返回的数据格式不符合Ext JS默认的Ext.data.reader.Json或Ext.data.reader.Xml等读取器的预期时，我们就需要实现自定义读取器。自定义读取器允许我们完全控制如何解析原始的HTTP响应，并将其转换为Ext JS Store能够理解的记录（Ext.data.Model实例）集合。
通常，我们会通过扩展Ext.data.reader.Json来创建自定义读取器，并重写其getResponseData方法。getResponseData方法接收原始的HTTP响应对象作为参数，其职责是解析这个响应，并返回一个包含success状态和data（或results）数组的JavaScript对象。
以下是一个自定义JSON读取器的实现示例：
// ModernApp.view.form.reader.Json.js (注意文件路径和命名与alias对应)Ext.define("ModernApp.view.form.reader.Json", { extend: "Ext.data.reader.Json", alias: "reader.myreader", // 注册别名，与Store中指定的type匹配 // 重写getResponseData方法来处理原始响应 getResponseData: function (response) { console.log("原始响应对象:", response); let decodedJson = {}; let success = false; let data = []; let errors = []; try { // 尝试从response.request.result.responseText中解码JSON数据 // 注意：实际响应数据的位置可能因服务器和Ext JS版本而异， // 常见的还有 response.responseText decodedJson = Ext.JSON.decode(response.request.result.responseText); success = true; // 假设解码成功即为成功 data = decodedJson; // 假设整个JSON就是我们需要的数据 } catch (e) { console.error("解码JSON失败:", e); success = false; errors.push({ message: "JSON解码失败或数据格式不正确", originalError: e.message }); } // 根据HTTP状态码和解码结果构建Reader期望的返回结构 if (response.status === 200 && success) { return { success: true, data: data, // 或 'results'，取决于Store的rootProperty配置 }; } else { // 处理非200状态码或解码失败的情况 return { success: false, errors: errors.length > 0 ? errors : [{ message: `请求失败，HTTP状态码: ${response.status}` }], }; } },});
在getResponseData方法中，我们首先打印了原始的response对象，这对于调试非常有用。然后，我们尝试使用Ext.JSON.decode来解析response.request.result.responseText（这是Ext JS内部处理AJAX响应时可能放置原始响应文本的位置）。解析成功后，我们将解析出的数据封装在一个包含success和data属性的对象中返回。如果解析失败或HTTP状态码不为200，则返回一个success: false和errors数组的对象。
3. 在组件中触发Store数据加载
由于Ext.form.Panel不直接绑定Store并自动加载数据，我们需要在适当的时机手动触发Store的数据加载。这通常发生在用户交互（如按钮点击）或组件生命周期事件（如afterrender）中。
以下是在Ext.form.Panel的按钮处理器中创建并加载Store的示例：
// FormView.jsExt.define("ModernApp.view.form.FormView", { extend: "Ext.form.Panel", xtype: "formview", title: "自定义表单", controller: "formviewcontroller", buttons: [ { text: "加载表单数据", // 按钮文本更明确其功能 handler: function() { // 1. 创建Store实例 const store = Ext.create('ModerdApp.view.form.FormViewStore'); // 2. 触发数据加载 store.load({ callback: function(records, operation, success) { if (success) { console.log("数据加载成功:", records); // 数据加载成功后，通常会将第一条记录的数据填充到表单中 if (records && records.length > 0) { const formData = records[0].getData(); this.up('formview').getForm().setValues(formData); Ext.Msg.alert('成功', '表单数据已加载！'); } } else { console.error("数据加载失败:", operation.getError()); Ext.Msg.alert('失败', '数据加载失败，请检查控制台。'); } }, scope: this // 确保回调函数中的this指向当前按钮 }); }, }, { text: "取消", handler: "onCancel", }, ], // 示例：在渲染后尝试加载数据（如果表单用于展示初始数据） listeners: { afterrender: function() { console.log("FormView 渲染完成"); // 如果需要在渲染后立即加载数据，可以在此处调用Store.load() // 但对于表单，通常更倾向于通过按钮或其他明确的用户操作来加载 // 示例： // const store = Ext.create('ModerdApp.view.form.FormViewStore'); // store.load({...}); }, }, items: [ { xtype: "fieldset", title: "关于您", instructions: "请填写您的个人信息", items: [ { xtype: "textfield", name: "firstName", label: "名" }, { xtype: "textfield", name: "lastName", label: "姓" }, { xtype: "datefield", name: "birthday", label: "生日" }, { xtype: "emailfield", name: "email", label: "邮箱" }, { xtype: "passwordfield", name: "password", label: "密码" }, ], }, ],});
在上述代码中，当用户点击“加载表单数据”按钮时，会执行以下操作：
Ext.create(‘ModerdApp.view.form.FormViewStore’)：创建一个FormViewStore的实例。store.load({…})：调用Store的load方法，这将触发Proxy发送AJAX请求。callback函数：请求完成后，无论成功或失败，都会执行此回调函数。在此函数中，我们可以检查success参数来判断加载结果，并对获取到的数据进行处理（例如，将数据填充到表单字段中）。
4. Store数据在组件间的访问与共享
一旦Store被成功加载，其数据将作为Ext.data.Model实例存储在Store的内部集合中。如果其他组件需要访问这些数据，它们需要获取到 同一个Store实例。
有几种常见的方法来在不同组件间共享和访问Store数据：
通过引用传递： 在创建组件时，可以将Store实例作为配置项传递给需要它的子组件。使用Ext.ComponentQuery： 如果Store被关联到某个组件（例如，通过bind配置），或者Store本身有一个id，其他组件可以通过Ext.ComponentQuery.query(‘store#myStoreId’)来查找并获取Store实例。控制器管理： 在Ext JS的MVC/MVVM架构中，控制器是管理Store生命周期和数据流的理想场所。控制器可以创建Store实例，并在需要时将其传递给视图组件，或者提供公共方法供视图调用来获取数据。单例Store： 对于一些全局共享且数据量不大的数据，可以将Store定义为单例，但这种方式应谨慎使用，以避免全局状态管理混乱。
一旦获取到Store实例，就可以通过其提供的方法访问数据：
store.getAt(index)：获取指定索引的记录。store.getData()：获取Store中所有记录的数据集合。store.findRecord(fieldName, value)：根据字段值查找记录。record.getData()：获取单个记录的所有字段数据。
例如，在NavView组件中获取FormViewStore的数据，如果FormViewStore实例在FormView的控制器中被创建并管理，NavView可以通过调用控制器的方法来获取该Store实例，或者控制器直接将数据传递给NavView。
5. 注意事项与最佳实践
Ext.form.Panel与Store的关联： 再次强调，Ext.form.Panel通常用于编辑单个Ext.data.Model实例，而不是直接绑定一个Ext.data.Store。若需加载数据到表单，应从Store中获取单个记录并使用form.setValues()。getResponseData的返回值： 自定义读取器的getResponseData方法必须返回一个包含success布尔值和data（或results，取决于rootProperty配置）属性的对象，以便Reader能够正确解析数据。错误处理： 在getResponseData中应包含健壮的JSON解码和错误处理逻辑。同时，在store.load的回调函数中也应处理数据加载失败的情况，向用户提供友好的反馈。调试： 充分利用浏览器开发者工具的网络请求功能来检查AJAX请求的发送和响应内容。在getResponseData和store.load的回调中加入console.log语句可以帮助追踪数据流和排查问题。异步操作： store.load()是一个异步操作，因此任何依赖于加载数据的逻辑都应该放在其callback函数中执行。
总结
通过本文的详细介绍，我们了解了如何在Ext JS应用中，利用Ext.data.Store、ajax代理和自定义读取器（Ext.data.reader.Json的扩展）来有效地发送AJAX请求并处理返回数据。关键在于正确配置Store的Proxy和Reader，尤其是在数据格式不标准时实现自定义的getResponseData方法。同时，对于Ext.form.Panel等不直接绑定Store的组件，需要手动触发Store的load方法，并在回调中处理获取到的数据。掌握这些机制，将有助于您构建更加健壮和灵活的Ext JS数据驱动型应用。
以上就是Ext JS中通过AJAX代理与自定义读取器实现数据加载的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526648.html
微信扫一扫 
支付宝扫一扫 
