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：
使用模板与程序分离的方式构建，依靠专门设计的数据库操作类实现数据库存取，具有专有错误处理模块，通过 Email 实时报告数据库错误，除具有满足购物需要的全部功能外，成新商城购物系统还对购物系统体系做了丰富的扩展，全新设计的搜索功能，自定义成新商城购物系统代码功能代码已经全面优化，杜绝SQL注入漏洞前台测试用户名：admin密码：admin888后台管理员名：admin密码：admin888
// 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.js
Ext.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 
