[英]Populate grid with row/column coordinates in 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-遍历column对象并创建另一个对象,该对象是ExtJS的有效列格式,例如:
var columns = [{
text : '1.0',
dataIndex: 'Alpha'
},{
text: '2.0',
dataIndex : 'Beta'
}];
3-使用grid.reconfigure(columns);
将列应用于网格grid.reconfigure(columns);
4-您的模型应包含以下fields : ['Alpha', 'Beta']
5-您的商店现在应该使用内存代理,因为您是使用Ext.Ajax.request抓取数据的。
6-遍历您的entry对象,并获取应添加的总行数。
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-使用store.loadRawData添加将行值分配给您的商店
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.