Javascript 显示sencha数据存储中的JSON

我已经搜索过了，我可以看到这个问题被问了好几次，但我甚至不知道如何在数据上做一个简单的

console.log

我的商店：

Ext.define('AventosPlanningTool.store.Aventos', {
  extend:'Ext.data.Store',

  config:
  {
    model:'AventosPlanningTool.model.Aventos',
    proxy:
    {
      type:'ajax',
      url:'resources/json/frames.json',
      reader:
      {
        type:'json',
        rootProperty:'options'
      }
    },
    autoLoad: true
  }
});

我可以在我的网络选项卡中看到JSON文件正在加载。我现在不知道该怎么办。在数据存储中，我将模型设置为

AventosPlanningTool.model.Aventos

，这是下面的文件

Ext.define('AventosPlanningTool.model.Aventos', {
  extend:'Ext.data.Model',
  xtype:'AventosModel',

  config:
  {
    fields: [
      'name',
      'image'
    ]
  }
});

我的JSON现在非常简单：

 {
  "name": "Cabinet Type",
  "options": [
    {
      "name": "Face Frame",
      "image": "resources/images/aventos/frames/faceframe.png"
    },
    {
      "name": "Panel",
      "image": "resources/images/aventos/frames/panel.png"
    }   
  ]
}

---

即使我可以对数据执行

console.log

，这也会非常有用。我不知道如何使用这些数据。我已经检查了文档中的两个指南：，但我无法理解它

查看数据存储的API文档。请注意，只有在加载存储后才能访问数据。例如：

store.load();
store.getAt(0) // null, the store load hasn't completed yet.

您可以使用

each

方法循环存储中的每条记录。您可以使用

getAt

store.each(function(rec) {
    console.log(rec.get('name'), rec.get('image'));
});

console.log(store.getAt(0).get('name'));

---

通常，您会将存储绑定到列表，API文档中有很多这样的示例。

我认为您缺少的是侦听存储上的“加载”事件

store.on('load', function(thisStore, records) {
   console.log(records[0].get('name'));
})

---

在sencha中，数据在模型中定义，并实际存储在存储中。您可以通过代理加载JSON。将模型视为sql中的表，将存储视为表中的实际数据。现在，如果要从存储中获取数据并对其执行操作，则必须加载存储。要将数据提取到列表中，您可以使用xtype:'list'定义一个列表指定您的商店商店：'yourStoreName'，并提供一个显示该数据的模板。这里有一个非常详细的解释我想说的话

还包括：

---

将加载侦听器添加到您的应用商店：

Ext.define('AventosPlanningTool.store.Aventos', {
    extend:'Ext.data.Store',

    config: {
        model:'AventosPlanningTool.model.Aventos',
        proxy: {
            type:'ajax',
            url:'resources/json/frames.json',
            reader: {
                type:'json',
                rootProperty:'options'
            }
        },
        autoLoad: true,

        listeners: {
            load: function(st, g, s, o, opts) {
                st.each(function(record) {
                    console.log(record.get('name') + ' - ' + record.get('image'));
                });
            }
    }
});

---

我真的不明白你的问题是什么。你说数据加载了，那么问题是什么呢？我不知道加载后如何使用数据，我不知道如何显示数据，甚至不知道如何使用一个简单的

控制台？你要把它绑定到一个列表上吗？一个视图？json是一个标题和一个图像，所以我假设它将是一个自定义的“视图”，一旦我能弄清楚如何访问数据，你仍然没有得到你期望的答案？我怎么知道数据何时加载了呢？因为我使用的是
自动加载
，而且我没有将数据绑定到任何特定的东西是的！这回答了我原来的问题，谢谢。我可以看出
st
表示存储，
opts
表示选项，但是
g
、
s
和
o
是什么？记录、成功和操作如下：