從sencha數據存儲顯示JSON

Question

我進行了搜索，可以看到已經問了很多遍了，但是我什至無法弄清楚如何對數據進行簡單的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 ，也將非常有幫助。 我不知道如何使用數據。 我已經在文檔中檢查了兩個指南： http : //docs-origin.sencha.com/touch/2.2.1/#!/ guide/ models ， http : //docs-origin.sencha.com/touch/2.2 .1 /＃！/ guide / stores ，我就是無法理解

Answer 1

在sencha中，數據在模型中定義，並實際上存儲在商店中。 您可以通過代理加載JSON。 將模型視為來自sql的表，並將存儲視為表中的實際數據。 現在，如果要從存儲中獲取數據並對其執行操作，則必須加載存儲。 要將數據提取到列表中，請使用xtype：'list'定義一個列表，指定您的商店：'yourStoreName'，並提供用於顯示該數據的模板。 這是我要說的非常詳細的解釋。

http://docs-origin.sencha.com/touch/2.2.1/#!/api/Ext.data。還請存儲以下內容： http : //miamicoder.com/2012/how-to-create-a-sencha點觸摸-2-應用部分-2 /

Answer 2

將負載偵聽器添加到您的商店：

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'));
                });
            }
    }
});

Answer 3

查看數據存儲的API文檔。 請注意，只有在加載商店后才能訪問數據。 例如：

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

您可以使用each方法循環存儲中的each記錄。 您可以使用getAt獲得特定索引的記錄

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

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

通常，您會將商店綁定到列表，API文檔中有很多此類示例。

Answer 4

我認為您缺少的是監聽商店中的“加載”事件。

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