使用JsonStore的ExtJS 4 Panel Grid未加载网格

时间:2012-11-01 01:58:43

标签: json extjs

我使用的是ExtJS 4.0.7,我正在使用JSON Store将其加载到Panel Grid。我使用的是Firefox 16.0.2版。这是一个非常简单的例子,我能够运行阵列网格。

Ext.onReady(function() {


var Grid1Store = new Ext.data.JsonStore({
    root: 'users',
    fields: [ 'id', 'name', 'email' ],
    autoLoad: true,
    data: { users: [ 
      { "id": 1, "name":"John Smith", "email":"jsmith@example.com"},
      { "id": 2, "name":"Anna Smith", "email":"asmith@example.com"},
      { "id": 3, "name":"Peter Smith", "email":"psmith@example.com"},
      { "id": 4, "name":"Tom Smith", "email":"tsmith@example.com"},
      { "id": 5, "name":"Andy Smith", "email":"asmith@example.com"},
      { "id": 6, "name":"Nick Smith", "email":"nsmith@example.com"}
    ]}
  });   


 var Grid1Grid = new Ext.grid.GridPanel({
      store: Grid1Store,
      renderTo: 'grid-example',
      title: 'Target',
      width: 300,
    columns: [
      {
        id: 'name',
        header: "Name",
        sortable: true,
        dataIndex: 'name'
      },{
        id: 'email',
        header: "Email",
        sortable: true,
        dataIndex: 'email'
      }
    ]

});

});

正在加载网格,不显示任何数据。它显示一个空白网格。我不确定这个问题。是否是由于某些浏览器兼容性问题?

1 个答案:

答案 0 :(得分:1)

您的商店是本地商店。请勿使用 root 属性

var Grid1Store = new Ext.data.JsonStore({
  fields: [ 'id', 'name', 'email' ],
  autoLoad: true,
  data: [ 
    { "id": 1, "name":"John Smith", "email":"jsmith@example.com"},
    { "id": 2, "name":"Anna Smith", "email":"asmith@example.com"},
    { "id": 3, "name":"Peter Smith", "email":"psmith@example.com"},
    { "id": 4, "name":"Tom Smith", "email":"tsmith@example.com"},
    { "id": 5, "name":"Andy Smith", "email":"asmith@example.com"},
    { "id": 6, "name":"Nick Smith", "email":"nsmith@example.com"}
  ]
});