Question

我是ExtJs的新手，我无法以任何形式将JSON数据加载到网格中 - 无论是内联还是静态JSON数据文件。任何帮助都非常感谢。

只显示空网格 - 没有任何数据。

   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 onReadyFunction = function(){

              var grid = new Ext.grid.GridPanel({
          renderTo: Ext.getBody(),
          frame: true,
          title: 'Database',
          width:300,              
          store: Grid1Store,
              columns: [
                  {text: "Id", dataIndex: 'id'},
                  {text: "Name", dataIndex: 'name'},
                  {text: "Email", dataIndex: 'email'}
              ]
                      });

      }
      Ext.onReady(onReadyFunction);

Answer 1

JsonStore不会将root作为配置参数。因此，在JsonStore实例中设置根参数是没用的。

此外，您的数据应该是这样的，以使其工作。

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

如果您希望json结构保持与您提到的相同，以下是一个解决方案。将其另存为另一个文件 - 例如'data.json'。通过以下方式重新定义您的商店。

var Grid1Store = new Ext.data.JsonStore({
  fields: [ 'id', 'name', 'email' ],
  autoLoad: true,
  proxy:{
    type:'ajax',
    url:'something.json',
    reader:{
         root:'users'
        }
    }

});

这就是你如何使用“root” - 作为代理对象的reader配置属性。

Answer 2

首先，当您指定数据时，不需要将autoLoad设置为true。 AutoLoad用于使用加载方法时。

在声明json对象之前，您可能不需要'users：'。您需要的另一件事是json reader config。

请参阅extjs文档http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.JsonStore

extjs文档太棒了，我一直都在使用它们！

希望这有助于

巴兹

Answer 3

您的代码运行正常。你上面提到的代码工作正常。我希望你使用的是ExtJS3.4版本。我在我的设置中执行代码它工作正常。

您可能会发现唯一的问题是标题部分不会出现。因为你使用“text”配置而不是“header”配置。更多的是你没有指定高度和使用更少的宽度。

如果这个答案满足你，请点击^符号给我评分。

请参考以下代码并进行修改。

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\test\Desktop\ext-3.4.0\resources\css\ext-all.css" />
<script type="text/javascript" src="C:\Documents and Settings\test\Desktop\ext-3.4.0\adapter\ext\ext-base.js"></script>
<script type="text/javascript" src="C:\Documents and Settings\test\Desktop\ext-3.4.0\ext-all.js"></script>
</head>

<body>
<script type="text/javascript">
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 onReadyFunction = function(){

              var grid = new Ext.grid.GridPanel({
          renderTo: Ext.getBody(),
          frame: true,
          title: 'Database',
          width:500,
          height:600,              
          store: Grid1Store,
              columns: [
                  {header: "Id", dataIndex: 'id'},
                  {header: "Name", dataIndex: 'name'},
                  {header: "Email", dataIndex: 'email'}
              ]
                      });

      }
      Ext.onReady(onReadyFunction);
</script> 
</body>
</html>

Answer 4

看起来您的问题在于您定义商店，将其放在onReady函数

中

将JSON数据加载到ExtJs网格中

4 个答案: