Populate grid with row/column coordinates in extjs

Question

I'm trying to populate an extjs grid with data from json. The values I need to populate in the cells are in an object that gives the row and column number. I'm not sure how to get the values into the correct cells with this json structure.

Here is the json:

{
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/reports"
    }
  },
  "columns" : [ {
    "softwareBuild" : {
      "buildId" : 10,
      "generation" : "Alpha",
      "build" : "1.0"
    },
    "eventTypeDisplay" : "Event Name 1"
  }, {
    "softwareBuild" : {
      "buildId" : 10,
      "generation" : "Beta",
      "build" : "2.0"
    },
    "eventTypeDisplay" : "Event Name 1"
  }],
  "entries" : [ {
    "row" : 0,
    "column" : 0,
    "value" : 10
  }, {
    "row" : 0,
    "column" : 1,
    "value" : 20
  }, {
    "row" : 1,
    "column" : 0,
    "value" : 30
  }, {
    "row" : 1,
    "column" : 1,
    "value" : 40
  } ],
  "rows" : [ {
    "metricTypeId" : 1,
    "metricName" : "Name 1",
    "source" : "1",
  }, {
    "metricTypeId" : 2,
    "metricName" : "Name 2",
    "source" : "2",
  }]
}

Here is the grid view:

Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    store: 'DataStore',
    width: 400,
    height: 200,
    title: 'Software Metrics',
    columns: [
        {
            text: 'Dynamic Column Name',
            dataIndex: ''
        }
    ]
});

Here is the model and store:

Ext.define('DataModel', {
    extend: 'Ext.data.Model',
    fields: [ 'value', 'generation', 'build', 'metricName', 'source' ]
});


Ext.define('DataStore', {
    extend: 'Ext.data.Store'
    model: 'DataModel',
    proxy: {
        type: 'rest',
        url : 'api/reports'
    }
});

Another question I have is how to populate the column headers with the "build" value from the columns array in the json object. And how to populate the cells in the first column with "metricName" from the rows array. But that could be for another question.

Guilherme Lopes Guilherme Lopes · Accepted Answer · 2015-08-30T22:52:11

This is a process that will take time so I'll tell you what you need to do:

1 - Get your JSON structure and assign it to a variable, you should probably use Ext.Ajax.request for this.

2 - Loop through the columns object and create another object that is a valid column format for ExtJS something like:

var columns = [{
    text : '1.0',
    dataIndex: 'Alpha'
},{
    text: '2.0',
    dataIndex : 'Beta'
}];

3 - Apply the columns to your grid using grid.reconfigure(columns);

4 - Your model should have fields : ['Alpha', 'Beta']

5 - Your store should use a memory proxy now since your grabbed the data using Ext.Ajax.request.

6 - Loop through your entries object and get the total number of rows that should be added.

var entries = [{
  "row" : 0,
  "column" : 0,
  "value" : 10
}, {
  "row" : 0,
  "column" : 1,
  "value" : 20
}, {
  "row" : 1,
  "column" : 0,
  "value" : 30
}, {
  "row" : 1,
  "column" : 1,
  "value" : 40
}];

var rows = [];
for (var i=0;i<entries.length;i++) {
    var currentRow = entries[i].row,
        currentColumn = entries[i].column,
        columnName = columns[currentColumn].dataIndex;

    if(currentRow > rows.length - 1) {
        rows.length = currentRow + 1;
    }
    if (!rows[currentRow]) rows[currentRow] = {};
    rows[currentRow][columnName] = entries[i].value;
}

7 - Add assign the rows value to your store using store.loadRawData

Fiddle: https://fiddle.sencha.com/#fiddle/t2g

Populate grid with row/column coordinates in extjs

1 Answers