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