Ext JS中通过AJAX代理与自定义读取器实现数据加载的教程

// 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'
});

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

// 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: "密码" },
      ],
    },
  ],
});