ExtJS Grid数据加载与显示：常见问题及解决方案

columns: [
  { text: "Title", dataIndex: "title", width: 200 },
  { text: "Body", dataIndex: "body", width: 250 },
  { text: "Id", dataIndex: "id", width: 120 }, // 注意这里是小写的'id'，需与API响应一致
],

const store = Ext.create("Ext.data.Store", {  
  alias: "store.gridviewstore", // 推荐的别名格式
  proxy: {
    type: "ajax",
    url: "https://jsonplaceholder.typicode.com/posts", // 你的API端点
  },
  autoLoad: true, // 自动加载数据
});

Ext.define("ModernApp.view.grid.GridView", {
  extend: "Ext.grid.Grid",
  title: "Simpsons",
  xtype: "gridview",
  store: store, // 直接引用已创建的store实例
  // ... 其他columns配置
});

store.load({
  callback: function (records, operation, success) {
    if (success) {
      console.log("数据加载成功！");
      // 可以对加载到的records进行进一步处理
      // 例如，如果Grid是动态创建的，可以在这里实例化Grid
      const panel = Ext.create("ModernApp.view.grid.GridView");
      Ext.Viewport.add(panel); // 将Grid添加到视图中
    } else {
      console.error("数据加载失败:", operation.getError());
    }
  },
});

// 定义并创建Ext.data.Store实例
const store = Ext.create("Ext.data.Store", {  
  alias: "store.gridviewstore", // 为Store定义别名
  proxy: {
    type: "ajax",
    url: "https://jsonplaceholder.typicode.com/posts", // 数据源API
  },
  autoLoad: true, // 在Store创建时自动加载数据
});

// 定义Grid视图
Ext.define("ModernApp.view.grid.GridView", {
  extend: "Ext.grid.Grid",
  title: "ExtJS 数据显示",
  xtype: "gridview", // 为Grid定义xtype，方便通过xtype引用
  store: store, // 将已创建的Store实例绑定到Grid
  columns: [
    { text: "标题", dataIndex: "title", width: 200, itemId: "txtTitle" },
    { text: "内容", dataIndex: "body", width: 250, itemId: "txtBody" },
    { text: "ID", dataIndex: "id", width: 120, itemId: "id" }, // 确保dataIndex与API响应字段匹配
  ],
  height: 200,
  layout: "fit", // 布局配置
  fullscreen: true, // 使Grid全屏显示
});

// 如果autoLoad为false，或者需要手动刷新数据，可以调用store.load()
// 在本例中，由于autoLoad: true，以下代码段仅用于演示回调逻辑，并非必需
store.load({
  callback: function (records, operation, success) {
    if (success) {
      console.log("数据加载完成，记录数：", records.length);
      // 在Store数据加载成功后，确保Grid已被创建并添加到视图中
      // 如果Grid是动态创建的，可以在这里实例化并添加
      if (!Ext.Viewport.down('gridview')) { // 检查是否已存在，避免重复添加
        const panel = Ext.create("ModernApp.view.grid.GridView");
        Ext.Viewport.add(panel);
      }
    } else {
      console.error("数据加载失败:", operation.getError());
    }
  },
});