Load JSON data into a ExtJs Grid

0
votes

I am new to ExtJs and I am not able to load JSON data into the grid in any form - either inline or from a static JSON data file. Any help is highly appreciated.

Only empty grid shows up - without any data.

   var Grid1Store = new Ext.data.JsonStore({
      root: 'users',
      fields: [ 'id', 'name', 'email' ],
      autoLoad: true,
      data: { users: [ 
        { "id": 1, "name":"John Smith", "email":"[email protected]"},
        { "id": 2, "name":"Anna Smith", "email":"[email protected]"},
        { "id": 3, "name":"Peter Smith", "email":"[email protected]"},
        { "id": 4, "name":"Tom Smith", "email":"[email protected]"},
        { "id": 5, "name":"Andy Smith", "email":"[email protected]"},
        { "id": 6, "name":"Nick Smith", "email":"[email protected]"}
      ]}
    });   
          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);
4
extjsextjs3

4 Answers

2
votes

JsonStore doesnt take root as a config parameter. So it is useless to set a root parameter in JsonStore instance.

Also your data should be like this to make it work. 

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

In case you want the json structure to remain the same as you mentioned, the following is a solution. Save it as a different file - say 'data.json'. Redefine your store the following way. 

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

});

And that is how you use "root" - as a reader config property of proxy object.

0
votes

First things first, you don't need to set autoLoad to true as you have data specified. AutoLoad is used for when you are using a load method.

You probably don't need the 'users:' before you declare your json object either. Another thing that you will need, is a json reader config.

Please refer to the extjs documentation http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.JsonStore

The extjs docs are fantastic, I use them all the time!!

Hope this Helps

Baz

0
votes

Your code work fine. The code which you mentioned above works fine. I hope you are using ExtJS3.4 version. I execute you code in my setup it works fine.

The only problem you may find is header part won't appear. its because you are using "text" config instead of "header" config. More over you did not specify the height and used less width.

if this answer satisfy you, please click ^ symbol to rate me.

please refer below code with modification.

<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":"[email protected]"},
        { "id": 2, "name":"Anna Smith", "email":"[email protected]"},
        { "id": 3, "name":"Peter Smith", "email":"[email protected]"},
        { "id": 4, "name":"Tom Smith", "email":"[email protected]"},
        { "id": 5, "name":"Andy Smith", "email":"[email protected]"},
        { "id": 6, "name":"Nick Smith", "email":"[email protected]"}
      ]}
    });   

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

It looks like your problem is where you define the store, put it inside your onReady function