Extjs5 存储加载正在请求模型文件,即使模型是在同一文件中定义的

Extjs5 store load is requesting a model file even when the model is defined in the same file

我不知道这是否是我的应用程序中的配置问题,因为我在一台运行良好的服务器上做了同样的事情。在不同的网络服务器上,我试图设置我只是想让一个例子工作,我 运行 陷入了一些非常奇怪的行为。出于某种原因,每当商店加载时,它都会对与商店模型名称同名的文件发出获取请求。我不明白为什么在同一文件中定义模型时它会请求模型文件!?我并不总是在同一个文件中定义模型或商店,它们位于正确的目录结构中,但我将它们移到一个文件中以解决此问题并排除可能性,但结果相同,因此为简单起见,它位于同一个文件:

 Ext.define('FPTModel', {
  extend: 'Ext.data.Model',
  fields: [
    {name: 'f1', type: 'int'}, 
    {name: 'f2', type: 'string'},
  ]
});

Ext.define('appName.view.main.Main', {
  extend: 'Ext.container.Container',
  requires: [...my controller and viewModel are here...],

  xtype: 'app-main',
  initComponent: function() {
    var myStore = Ext.create('Ext.data.Store', {
      model: 'FPTModel',
      data: [
        {f1: 1, f2: 'someData'}, 
        {f1: 2, f2: 'some more data'}, 
      ],
      autoLoad: true
    });
    this.testStore = myStore;
    this.callParent();
  },
  controller: 'main',
  viewModel: {
    type: 'main'
  },
  layout: {
    type: 'border'
  },
  items: [{
    region: 'center',
    xtype: 'tabpanel',
    items: [{
      title: 'tab 1',
      xtype: 'container',
      layout: 'vbox',
      items: [{
        xtype: 'grid',
        height: 300,
        width: '100%',
        columns: [
          {header: 'Field 1', dataIndex: 'f1' }, 
          {header: 'Field 2',dataIndex: 'f2'}, 
        ],
        store: this.testStore
      }]
    }]
  }]
});

页面加载时一切正常,没有错误。每当商店加载时,我都会看到 https://my.site/FPTModel?_dc=1432862899334&page=1&start=0&limit=25

的 GET 请求

我知道商店加载时会发生这种情况,因为当我删除 autoLoad 时它不会发送获取请求,如果我在任何地方调用 testStore.load 它会发送获取请求。

这个get请求returns 404显然是因为那个文件不存在。我不明白为什么它试图从服务器的根目录加载模型文件,或者根本不理解它已经定义了。当我在它的正确目录结构 (appName.model.FPTModel) 中定义它时,get 请求是针对 .../appName.model.FPTModel...

我已经使用 extjs 大约 2 年了,我从未见过这样的东西......希望有人能对此有所启发,因为它让我发疯。我希望我在某处遗漏了一些简单的东西......

因为您指定了 autoLoad,这会触发商店发送加载请求。由于您没有为代理提供 URL,因此它默认为模型名称。删除autoLoad,它是多余的。

这是因为您对模型进行了 Ext.define。

然后 Extjs 将在您的应用程序的命名空间中查找并尝试将模型 FPTModel 查找为 FPTModel.js 文件,因为您只在应用程序的根目录中使用了 "FPTModel"。

您应该使用 Ext.create 创建模型作为变量结果,并在您的商店中使用该变量(包含模型对象)。或者您应该在文件夹 appName/model/ 中创建一个包含模型描述的附加文件,并在商店中引用它。

但是你必须在你的商店中为模型添加一个需要的配置设置。像

要求:['appName.model.FPTModel']

如果您已将模型和商店添加到应用中 application.js 的要求,则不必执行此操作。

如果您对模型没有进一步的需求,我会将这些字段包含在商店定义中。

我对你的对象做了一些重组(不完整)。为了清楚起见,我添加了一些面板。如果不需要,请不要使用边框布局,避免过度布局和不必要的面板嵌套。

我添加了函数 getGridStore,您可以使用 this.getGridStore() 调用它,以避免像 this.teststore = myStore.

这样的函数

因此,如果您必须重新加载商店,您只需执行以下操作:this.getGridStore().load(),或者在应用程序或视图控制器中执行以下操作:this.getMainPanel.getGridStore().load() .

不需要自动加载配置,因为存储已经保存了数据。仅当您从代理(服务器)加载数据时才需要它。

Ext.define('appName.view.main.Main', {
   extend: 'Ext.panel.Panel',
   layout: 'border',
   requires: [],
   xtype: 'app-main',

   controller: 'main',

   viewModel: {
      type: 'main'
   },

   initComponent: function () {

      var myModel = Ext.create('Ext.data.Model', {
         fields: [
            {name: 'f1', type: 'int'},
            {name: 'f2', type: 'string'},
         ]
      });

      var myStore = Ext.create('Ext.data.Store', {
         model: myModel,
         data: [
            {f1: 1, f2: 'someData'},
            {f1: 2, f2: 'some more data'},
         ],
         autoLoad: true
      });

      Ext.applyIf(this, {
         items: [{
            region: 'center',
            title: 'Center Panel',
            flex: 3,
            xtype: 'tabpanel',
            items: [{
               title: 'tab 1',
               xtype: 'gridpanel',
               layout: 'fit', // maybe not even neccessary
               columns: [
                  {header: 'Field 1', dataIndex: 'f1'},
                  {header: 'Field 2', dataIndex: 'f2'},
               ],
               store: myStore
            }, {
               xtype: 'panel',
               html: 'Some other tab',
               layout: 'fit'
            }]
         }, {
            xtype: 'panel',
            region: 'east',
            flex: 1,
            html: 'East panel',
            title: 'East Panel'
         }]
      });

      this.callParent();
   },

   getGridStore: function() {
      return this.down('gridpanel').getStore();
   }
});