将 JSON 数据加载到 ExtJs 网格中答案

【问题标题】：Load JSON data into a ExtJs Grid将 JSON 数据加载到 ExtJs 网格中
【发布时间】：2013-04-17 15:26:39
【问题描述】：

我是 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);

【问题讨论】：

标签： extjs extjs3

【解决方案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”的方式 - 作为代理对象的读取器配置属性。

【讨论】：

这里的用户是什么。如何加载数据

【解决方案2】：

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

在声明 json 对象之前，您可能也不需要“用户：”。您需要的另一件事是 json 阅读器配置。

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

extjs 文档很棒，我一直在使用它们！！

希望对你有帮助

巴兹

【讨论】：

【解决方案3】：

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

您可能会发现的唯一问题是标题部分不会出现。这是因为您使用的是“文本”配置而不是“标题”配置。更何况你没有指定高度并使用了更少的宽度。

如果这个答案让你满意，请点击^符号给我打分。

请参考下面的代码进行修改。

<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>

【讨论】：

【解决方案4】：

看起来你的问题是你定义商店的地方，把它放在你的 onReady 函数中

【讨论】：