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.js
Ext.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.js
Ext.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数据驱动型应用。
