Ext JS AJAX请求：通过代理与自定义读取器高效管理数据

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", // 指定自定义读取器
    },
  },
});

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}` }],
      };
    }
  },
});

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 ...
});

// ModernApp.view.form.FormViewController.js
Ext.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(); // 重置表单字段
  },
});