Javascript 将数据绑定到ExtJS中存储的rest代理中查看

我正试图将通过RESTURL获得的JSON数据填充到视图中。由于某些原因，JSON值不会显示

以下是我的看法：

Ext.define('Project.view.main.Main', {
    extend: 'Ext.panel.Panel',
    layout: 'border',
    bodyBorder: false,
    defaults: {
        collapsible: false,
        split: false
    },
    viewModel: {
        type: 'animalClassViewModel'  
    },
    items: [
        {
            region:'north',
            autoHeight: true,
            margin: '0 0 0 0',         
            bind: {
                html: '<p style="text-align: center;">{animalClass.name}</p>' // this should display "mammals" from json
            }
        },
        {
            region: 'center',
            margin: '0 0 0 0',
            items:[
                {
                    items: [{
                        xtype: 'tabPanel'
                    }]
                }
            ]
        },

    ]
});

我的模型：

Ext.define('Project.model.AnimalClassModel', {
    extend: 'Ext.data.Model',

    fields: ['name']
});

这就是JSON的样子：

{
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/animalClass"
    }
  },
  "name" : "mammals"
}

我在视图中尝试了

{animalClass}

，但它返回了整个对象，这是有意义的。但是我不确定为什么

{animalClass.name}

不显示“哺乳动物”

我试着遵循这个例子：但它对我不起作用。它似乎并没有包含所有要使其工作的组件。

您必须将设置为指向一个数据数组（在json中）。这意味着该属性内的所有内容都将作为数据绑定到：

存储上的代理：

proxy: {
    type: 'rest',
    url : 'users.json',
    reader: {
        type: 'json',
        rootProperty: 'animals'
    }
}

JSON:

必须将设置为指向一个数据数组（在json中）。这意味着该属性内的所有内容都将作为数据绑定到：

存储上的代理：

proxy: {
    type: 'rest',
    url : 'users.json',
    reader: {
        type: 'json',
        rootProperty: 'animals'
    }
}

JSON:

---

类

是一个

保留关键字

。不要使用它，它会导致你面临的问题。实际上，我在真正的代码中没有使用“类”。我编辑了我的问题以反映这一点。

animalClass

是一个商店，一个记录的集合。所以说

animalClass.name

没有意义。相反，您希望在模型上定义代理，并使用

链接

配置加载单个实例。这个例子：帮助我找到了我的解决方案：

类

是一个

保留关键字

。不要使用它，它会导致你面临的问题。实际上，我在真正的代码中没有使用“类”。我编辑了我的问题以反映这一点。

animalClass

是一个商店，一个记录的集合。所以说

animalClass.name

没有意义。相反，您希望在模型上定义代理，并使用

链接

配置加载单个实例。以下示例：帮助我找到解决方案：

{
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/animalClass"
    }
  },
  "animals": {
    "name" : "mammals"
  }
}