Ext JS 4.2升级到7.7后创建Store时Model报404错误求助

我们正在将应用从Ext JS 4.2升级到Ext JS 7.7。使用RAVI.Model.Weeks创建Store时，该Model出现404错误，但相同代码在Ext JS 4.2中可正常运行，其他以相同方式创建的Store也无异常。

错误详情：GET请求https://9791859.app.netsuite.com/RAVI.Model.Weeks?_dc=1714733800105&page=1&start=0&limit=25返回404 (Not Found)。

相关代码 #

RAVI.Model.SimpleList #

Ext.define("RAVI.Model.SimpleList", {
  extend: "Ext.data.Model",
  idProperty: "id",
  fields: [
    {
      name: "id",
      type: "int",
      defaultValue: 0,
    },
    {
      name: "name",
      type: "string",
    },
  ],
});

RAVI.Model.Weeks #

Ext.define("RAVI.Model.Weeks", {
  extend: "RAVI.Model.SimpleList",
  fields: [
    // id and name already inherited
    {
      name: "start",
      type: "string",
    },
    {
      name: "end",
      type: "string",
    },
    {
      name: "currentWeekNumber",
      type: "string",
    },
    {
      name: "previousYearWeeks",
      type: "string",
    },
  ],
});

RAVI.Store.Base #

Ext.define("RAVI.Store.Base", {
  extend: "Ext.data.Store",
  autoLoad: false,
  buffered: false,
  constructor: function (config) {
    var extraParams = !config.extraParams ? [] : config.extraParams;
    if (config.url) {
      Ext.apply(config, {
        proxy: {
          type: "ajax",
          url: config.url,
          reader: {
            type: "json",
            root: "data",
            idProperty: "id",
            totalProperty: "totalCount",
          },
          appendId: false,
          extraParams: extraParams,
          ownerComponentId: config.ownerComponentId,
        },
      });
    }
    this.callParent([config]);
  },
});

RAVI.Store.Pagination #

Ext.define("RAVI.Store.Pagination", {
  extend: "RAVI.Store.Base",
  model: "RAVI.Model.Weeks",
  listeners: {
    load: function (store, records, successful, eOpts) {
      var myCombo = Ext.getCmp(RAVI.App.Panel.id + "-page-combo-box");
      if (myCombo) {
        myCombo.triggerDataCall();
      }
    },
  },
});

创建Store的方式 #

Ext.create("RAVI.Store.Pagination", {
  id: "ravi-style-trend-pl-page-combo-box",
  autoLoad: true,
  matchFieldWidth: false,
  data: {
    currentWeekNumber: "1",
    end: "1/6/2024",
    id: 1,
    name: "Wk 1: Dec 31 - Jan 6",
    previousYearWeeks: "52",
    start: "12/31/2023",
  },
});

解决方案 #

这个问题的核心是Ext JS 7.x中，当Store未显式指定proxy且开启autoLoad: true时，框架会自动基于Model类名生成默认AJAX请求URL，即便你传入了本地data，但未配置内存代理，框架依然会发起远程请求导致404。

解决步骤 #

1. 为本地数据Store指定memory代理
   在创建Store时添加proxy配置，明确使用内存代理读取本地数据：

Ext.create("RAVI.Store.Pagination", {
  id: "ravi-style-trend-pl-page-combo-box",
  autoLoad: true,
  matchFieldWidth: false,
  proxy: {
    type: 'memory',
    reader: {
      type: 'json'
    }
  },
  // 注意：将单条数据包装为数组，符合memory代理的默认数据格式要求
  data: [{
    currentWeekNumber: "1",
    end: "1/6/2024",
    id: 1,
    name: "Wk 1: Dec 31 - Jan 6",
    previousYearWeeks: "52",
    start: "12/31/2023",
  }],
});

2. 批量优化：修改BaseStore自动处理本地数据
   如果有大量本地数据Store需要处理，可以修改RAVI.Store.Base的构造函数，自动为带本地data的Store添加memory代理：

constructor: function (config) {
  var extraParams = !config.extraParams ? [] : config.extraParams;
  if (config.url) {
    Ext.apply(config, {
      proxy: {
        type: "ajax",
        url: config.url,
        reader: {
          type: "json",
          root: "data",
          idProperty: "id",
          totalProperty: "totalCount",
        },
        appendId: false,
        extraParams: extraParams,
        ownerComponentId: config.ownerComponentId,
      },
    });
  } else if (config.data) {
    // 自动为本地数据添加memory代理
    Ext.apply(config, {
      proxy: {
        type: 'memory',
        reader: {
          type: 'json',
          root: 'data'
        }
      }
    });
    // 自动将单条数据转为数组（可选）
    if (!Ext.isArray(config.data)) {
      config.data = [config.data];
    }
  }
  this.callParent([config]);
}

3. 额外检查：类加载顺序
   确保RAVI.Model.Weeks在Store创建前已正确加载，Ext JS 7.x的类加载机制比4.x更严格，类加载顺序异常可能引发间接问题。

内容的提问来源于stack exchange，提问作者user24851540