Ext JS代理发AJAX请求、自定义Reader及跨组件取Store数据问题

问题概述 #

• FormViewStore中通过Proxy发送AJAX请求无响应且无报错，疑似代码存在错误
• 不清楚如何通过自定义Reader获取请求返回的数据
• 如何在NavView组件中获取FormViewStore中的数据

相关代码 #

FormView 文件 #

Ext.define("ModernApp.view.form.FormView", {
  extend: "Ext.form.Panel",
  xtype: "formview",
  title: "Custom Form",
  store: { type: "formviewstore" },
  controller: "formviewcontroller",
  cls: "formView",
  buttons: [
    {
      text: "Оправить",
      handler: "onSubmit",
    },
    {
      text: "Отмена",
      handler: "onCancel",
    },
  ],
  listeners: {
    afterrender: "onFormRender",
  },

  onFormRender() {
    console.log("onFormRender");
    var controller = this.getController();

    // Загрузка данных из сторы
    controller.loadFormViewStore();
  },
  items: [
    {
      xtype: "fieldset",
      title: "About You",
      instructions: "Tell us all about yourself",
      items: [
        {
          xtype: "textfield",
          name: "firstName",
          label: "First Name",
          listeners: {
            change: {
              fn: function (event) {
                const name = Ext.ComponentQuery.query(
                  "textfield[name=firstName]"
                )[0].getValue();

                const surname = Ext.ComponentQuery.query(
                  "textfield[name=lastName]"
                )[0].setValue(name || "");
              },
            },
          },
        },
        {
          xtype: "textfield",
          name: "lastName",
          label: "Last Name",
        },
        {
          xtype: "datefield",
          name: "birthday",
          label: "Birthday",
        },
        {
          xtype: "emailfield",
          name: "email",
          label: "Email",
        },
        {
          xtype: "passwordfield",
          name: "password",
          label: "Password",
        },
      ],
    },
  ],
});

FormViewStore 文件 #

Ext.define("ModerdApp.view.form.FormViewStore", {
  extend: "Ext.data.Store",
  alias: "formviewstore",
  proxy: {
    type: "ajax",
    url: "https://jsonplaceholder.typicode.com/posts",
    reader: {
      type: "myreader",
    },
  },
});

自定义Reader 文件 #

Ext.define("ModernApp.view.form.reader.Json", {
  extend: "Ext.data.reader.Json",
  alias: "myreader",
  getResponseData: function (responce) {
    console.log("response", responce);
  },
});

问题解决 #

1. 修复AJAX请求无响应问题 #

代码存在三处关键错误：

• 命名空间拼写错误：ModerdApp应为ModernApp，命名空间不匹配会导致Store无法被Ext正确识别
• Alias格式错误：Store的alias必须以store.为前缀，正确写法是alias: "store.formviewstore"；自定义Reader的alias必须以reader.为前缀，正确写法是alias: "reader.myreader"
• 加载逻辑缺失：确保控制器的loadFormViewStore方法正确调用了store.load()，或在Store中添加autoLoad: true实现初始化自动加载

修正后的FormViewStore代码：

Ext.define("ModernApp.view.form.FormViewStore", {
  extend: "Ext.data.Store",
  alias: "store.formviewstore",
  autoLoad: true,
  proxy: {
    type: "ajax",
    url: "https://jsonplaceholder.typicode.com/posts",
    reader: {
      type: "myreader",
    },
  },
});

2. 自定义Reader获取返回数据 #

自定义Reader需要正确重写方法并返回处理后的数据，你的代码存在参数拼写错误（responce→response），且未调用父类方法返回数据，导致Store无法接收解析结果。

修正后的自定义Reader代码：

Ext.define("ModernApp.view.form.reader.Json", {
  extend: "Ext.data.reader.Json",
  alias: "reader.myreader",
  getResponseData: function (response) {
    console.log("原始响应数据", response);
    // 调用父类方法解析数据，可在此添加自定义处理逻辑
    var parsedData = this.callParent([response]);
    console.log("解析后的数据", parsedData);
    return parsedData; // 必须返回数据，否则Store无法加载
  },

  // 可选：重写read方法，更灵活处理整个读取流程
  read: function(response) {
    var result = this.callParent([response]);
    console.log("读取结果", result);
    return result;
  }
});

3. 在NavView中获取FormViewStore数据 #

有三种常用实现方式：

• 通过Store别名直接获取：

  // 使用完整别名（推荐）
  var formStore = Ext.getStore('store.formviewstore');
  // 或简写（确保别名唯一）
  var formStore = Ext.getStore('formviewstore');
  // 获取数据集合
  var storeData = formStore.getData();
  

• 通过组件关联获取：若NavView与FormView在同一视图层级，可通过组件查询定位FormView后获取Store：

  var formView = Ext.ComponentQuery.query('formview')[0];
  var formStore = formView.getStore();
  

• 通过ViewModel共享：若项目使用ViewModel，可在ViewModel中配置Store，再在NavView中通过以下方式获取：

  var formStore = this.getViewModel().getStore('formviewstore');
  

内容的提问来源于stack exchange，提问作者Евгений Мушков