ExtJS Grid与Store数据加载：常见错误排查与最佳实践

[
  { "id": 1, "title": "Post 1", "body": "Content 1" },
  { "id": 2, "title": "Post 2", "body": "Content 2" }
]

columns: [
    { text: "Id", dataIndex: "Id", width: 120, itemId: "id" }, // 错误：应为 "id"
    // ... 其他列
]

columns: [
    { text: "Id", dataIndex: "id", width: 120, itemId: "id" }, // 正确：与API响应匹配
    { text: "Title", dataIndex: "title", width: 200, itemId: "txtTitle" },
    { text: "Body", dataIndex: "body", width: 250, itemId: "txtBody" }
]

// 独立创建Store
const myStore = Ext.create("Ext.data.Store", {  
    alias: "store.mygridstore", // 为Store定义一个别名，方便查找和复用
    proxy: {
        type: "ajax",
        url: "https://jsonplaceholder.typicode.com/posts" // API数据源
    },
    autoLoad: true // 设置为true，Store在创建后会自动加载数据
});

// 定义Grid并关联Store
Ext.define("ModernApp.view.grid.MyGridView", {
    extend: "Ext.grid.Grid",
    xtype: "mygridview",
    title: "文章列表",
    store: myStore, // 将上面创建的Store实例关联到Grid
    columns: [
        { text: "Id", dataIndex: "id", width: 120 },
        { text: "Title", dataIndex: "title", flex: 1 }, // 使用flex使列自适应宽度
        { text: "Body", dataIndex: "body", flex: 2 }
    ],
    height: 400,
    layout: "fit",
    fullscreen: true // 如果此Grid是主视图，可设置此项
});

// 在应用程序启动时创建并显示Grid
Ext.application({
    name: 'ModernApp',
    launch: function() {
        Ext.create('ModernApp.view.grid.MyGridView');
    }
});

const store = Ext.create("Ext.data.Store", {  
    alias: "store.gridviewstore",
    proxy: {
        type: "ajax",
        url: "https://jsonplaceholder.typicode.com/posts"
    }
    // 注意：这里没有设置 autoLoad: true
});

// 手动加载数据，并在加载完成后创建Grid
store.load({
    callback: function (records, operation, success) {
        if (success) {
            console.log("数据加载成功！");
            // 可以在这里对 records 进行处理
            // 然后创建并显示Grid
            Ext.create("ModernApp.view.grid.MyGridView", {
                store: store // 将已加载数据的Store传递给Grid
            });
        } else {
            console.error("数据加载失败:", operation.getError());
        }
    }
});

// Grid的定义可以保持不变，但要确保它能接受一个Store实例
Ext.define("ModernApp.view.grid.MyGridView", {
    extend: "Ext.grid.Grid",
    title: "文章列表",
    xtype: "mygridview",
    // store属性可以在这里指定，也可以在创建实例时传入
    columns: [
        { text: "Title", dataIndex: "title", width: 200 },
        { text: "Body", dataIndex: "body", width: 250 },
        { text: "Id", dataIndex: "id", width: 120 }
    ],
    height: 400,
    layout: "fit",
    fullscreen: true
});