在extjs中用行/列坐标填充网格
Populate grid with row/column coordinates in extjs
我试图填充一个extjs网格与json的数据。我需要在单元格中填充的值位于提供行号和列号的对象中。我不确定如何使用这个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对象中的列数组中填充"构建"值的列标题。以及如何用rows数组中的"metricName"填充第一列中的单元格。但这可能是另一个问题。
这是一个需要时间的过程,所以我会告诉你你需要做什么:
1 -获取JSON结构并将其分配给一个变量,您可能应该使用Ext.Ajax.request。
2 -循环遍历columns对象并创建另一个对象,该对象是ExtJS的有效列格式,例如:
var columns = [{
text : '1.0',
dataIndex: 'Alpha'
},{
text: '2.0',
dataIndex : 'Beta'
}];
3 -使用grid.reconfigure(columns);
4 -你的模型应该有fields : ['Alpha', 'Beta']
你的商店现在应该使用内存代理,因为你使用Ext.Ajax.request抓取数据。
6 -遍历条目对象并获得应该添加的行总数。
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
添加将行值分配给您的存储小提琴:https://fiddle.sencha.com/小提琴/t2g
相关文章:
- 如何设置html元素填充的动画
- 如何使用jquery在填充自动完成的值后使文本框只读
- 如何通过ajax刷新JSF填充的javascript变量
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 如何在d3.js中返回路径的y坐标
- 用与线条相同的颜色填充多折线图上的点
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 在谷歌地图上获取事件的x,y坐标
- 通过ajax将坐标传递到php服务器端,并在处理后检索到javascript
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 用我的json数据填充JQuery DataTable
- 使用 jQuery 检查所有值是否为空或已填充
- 为什么不't我的变量在我的控制器中填充后在我的视图中呈现
- 在自定义坐标处获取RaphaelJS元素的颜色填充
- 使用地理位置坐标填充字段
- Highcharts-悬停时x坐标之间的不同填充颜色
- gRaphael折线图:用JSON数据填充弹出标签而不是x&y坐标
- 在extjs中用行/列坐标填充网格
- 使用JavaScript或Coldfusion绘制和填充基于4或5个坐标点的区域
- 画布填充矩形有错误的 X 坐标