Javascript 用extjs中的行/列坐标填充网格

我试图用json中的数据填充extjs网格。我需要在单元格中填充的值位于一个提供行和列编号的对象中。我不知道如何使用这个json结构将值放入正确的单元格

以下是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",
  }]
} 

以下是网格视图：

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

以下是模型和存储：

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'
    }
});

---

---

我的另一个问题是如何使用json对象中columns数组的“build”值填充列标题。以及如何使用rows数组中的“metricName”填充第一列中的单元格。但这可能是另一个问题

这是一个需要时间的过程，因此我将告诉您需要做什么：

1-获取JSON结构并将其分配给变量，您可能应该使用Ext.Ajax.request

2-循环遍历columns对象并创建另一个对象，该对象是ExtJS的有效列格式，类似于：

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

3-使用

网格将列应用到网格。重新配置（列）

4-您的模型应该有
字段：['Alpha'，'Beta']

5-由于您的应用程序使用Ext.Ajax.request获取数据，因此您的存储现在应该使用内存代理

6-遍历entries对象并获取应添加的行总数

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

var条目=[{
“行”：0，
“列”：0，
“价值”：10
}, {
“行”：0，
"专栏":一,，
“价值”：20
}, {
“行”：1，
“列”：0，
“价值”：30
}, {
“行”：1，
"专栏":一,，
“价值”：40
}];
var行=[]；
对于（变量i=0；i rows.length-1）{
rows.length=currentRow+1；
}
如果（！rows[currentRow]）rows[currentRow]={}；
行[currentRow][columnName]=条目[i]。值；
}

7-添加-使用store.loadRawData将行值分配给您的存储

小提琴：