使用JsonStore的ExtJS 4面板網格不加載網格

Question

我使用的是ExtJS 4.0.7，我正在使用JSON Store將它加載到面板網格。我使用的是Firefox 16.0.2版。這是一個非常簡單的例子，我可以運行Array網格。

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' 
     } 
    ] 

}); 

}); 

表格正在加載並且沒有數據顯示。它顯示一個空格。我不確定這個問題。是否由於某些瀏覽器兼容性問題？

Answer 1

你的店鋪是本地的。請勿使用根屬性

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"} 
    ] 
});