Question

Given data in the form:

var grid_data = [ {Hello: 'World'}, {Jesus:'Navas'} ]

I wish to draw a grid like so:

The grid shows with 2 rows but with no data, I can’t find the problem in the following code:

    var grid_store = Ext.create('Ext.data.Store', {
    fields: [
       {name: 'Property'},
       {name: 'Value'}
    ],
    data: grid_data
});

    // create the Grid
var grid_view = Ext.create('Ext.grid.Panel', {
    store: grid_store,
    renderTo: 'info_panel',
    stateful: true,
    stateId: 'stateGrid',
    columns: [
        {
            text     : 'Property',
            width    : 100,
            sortable : true,
            dataIndex: 'Property'
        },
        {
            text     : 'Value',
            width    : 80,
            sortable : false,
            dataIndex: 'Value'
        }
          ],
    height: 350,
    width: 600,
    title: 'Array Grid',
    viewConfig: {
        stripeRows: true
    }
});

Renders to:

<div id="info_panel"></div>

If you’re wondering how I got the example image, I changed the store to an ArrayStore and re-formatted the data into arrays, but I’d prefer to miss out that step and insert the data as-is.

edit:

I think what I’m really asking for is a way to alert extjs to use the JSON keys as values, as opposed to most of the grid examples out there that take the form:

{value: 'Hello'}, {property: 'World'}

Answer 1

As one of the commenters and your edit suggested, your grid is built to consume a json with ‘Property’ and ‘Value’ being the keys for the json objects. I don’t know if it’s possible for you to change the source of the data to send in the reformatted json, but if not, you can always just run a quick loop to do so after receiving the data:

var new_data = [];
Ext.each(grid_data, function(obj) {
  for (var prop in obj) {
    new_data.push({
      Property: prop,
      Value: obj[prop]
    });
  }
}, this);