英文:
Error in Sencha Fiddle (Unrecognized alias, Some requested files failed to load.)
问题
我继续学习 extjs。我想使用 store 对象获取数据，并在 Ext.grid 组件中显示它，但我遇到了一些错误。这里是我的 Sencha Fiddle 链接Sencha Fiddle，也许有经验的人可以看看我做错了什么。我对以下几点感兴趣：我希望在加载数据时立刻显示它们，即不需要额外的触发器。同时，我在一个地方创建了 store 对象和 Ext.grid 组件。Grid 是正确的方法吗，还是应该将 store 始终放在一个单独的文件中？非常感谢您提前的帮助！
英文:
I continue to study extjs. I wanted to get data using the store object and display it in the Ext.grid component.Grid, but I get a few errors. Here is a link to my Sencha Fiddle Sencha Fiddle, maybe someone has more experience, please see what I'm doing wrong. I'm interested in a couple of points. I want to display the data at the moment when they loaded, that is, without additional triggers. At the same time, I created the store object in one place with the Ext.grid component.Is Grid the correct approach, or should store always be in a separate file?Thank you so much in advance for your help!
答案1
得分: 2
我对您在网格存储配置中实现函数的行中进行了一些更改。这是不必要的，因为您已经将存储的值存储在常量'store'中。
不，您不必总是创建单独的存储文件。但出于最佳实践和约定，这是很好的并且建议这样做。
在查看您的示例时，我注意到您的网格的dataIndex没有与API的响应相匹配。当我使用浏览器的开发工具检查网络请求时，我发现您收到的JSON不符合您对网格列的期望格式。因此，记录未显示在网格中。我已经为您进行了必要的编辑。
这是网格的更新代码。
const store = Ext.create("Ext.data.Store", {
alias: "store.gridviewstore",
proxy: {
type: "ajax",
url: "https://jsonplaceholder.typicode.com/posts",
},
autoLoad: true,
});
Ext.define("ModernApp.view.grid.GridView", {
extend: "Ext.grid.Grid",
title: "Simpsons",
xtype: "gridview",
store: store,
columns: [
{ text: "Title", dataIndex: "title", width: 200, itemId: "txtTitle" },
{ text: "Body", dataIndex: "body", width: 250, itemId: "txtBody" },
{ text: "Id", dataIndex: "id", width: 120, itemId: "id" },
],
height: 200,
layout: "fit",
fullscreen: true,
});
store.load({
callback: function (record, operation, success) {
const data = store.getData();
data.each((record) => {});
const panel = Ext.create("ModernApp.view.grid.GridView");
},
});
如果您有任何不明白的地方，请随时提问。
英文:
I made some changes to the lines where you're implementing a function in the store config of the grid. It wasn't necessary because you are already storing the value of the store in the constant 'store'.
No, you don't always need to create a separate store file. BUT it's good and RECOMMENDED to do so for best practices and convention.
While looking your fiddle, I noticed that your grid's dataIndex wasn't matching the response from the API. When I inspected the network request using the browser's dev. tools, I found that the JSON you receive isn't in the format you were expecting for the grid columns. As a result, the records were not being displayed in the grid. I've made the necessary edits for you.
Here is the updated code for the grid.
const store = Ext.create("Ext.data.Store", {
alias: "store.gridviewstore",
proxy: {
type: "ajax",
url: "https://jsonplaceholder.typicode.com/posts",
},
autoLoad: true,
});
Ext.define("ModernApp.view.grid.GridView", {
extend: "Ext.grid.Grid",
title: "Simpsons",
xtype: "gridview",
store: store,
columns: [
{ text: "Title", dataIndex: "title", width: 200, itemId: "txtTitle" },
{ text: "Body", dataIndex: "body", width: 250, itemId: "txtBody" },
{ text: "Id", dataIndex: "Id", width: 120, itemId: "id" },
],
height: 200,
layout: "fit",
fullscreen: true,
});
store.load({
callback: function (record, operation, success) {
const data = store.getData();
data.each((record) => {});
const panel = Ext.create("ModernApp.view.grid.GridView");
},
});
feel free to ask anything about it that you couldn't understand
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论