我在 extjs 中有 GridView ,但我需要在每一行中显示一个条形图,显示某些值的百分比。在extjs中如何实现这一点?也许这张图片会对我想要构建的东西有所帮助。
最佳答案
实现此目的的一种方法是通过延迟渲染图表。基本上你这样做:
- 使用自定义渲染器创建网格列。
- 在渲染器中,您输出一个具有已知 id 的 div。该 div 最终将包含您的图表。
- 您可以推迟对自定义函数的调用(使用
Ext.defer
),并传入此 ID(以及图表所需的任何信息)。此函数将渲染您的图表。 - 在该函数内,您创建一个图表,并将其
renderTo
为具有传入 ID 的元素。
此代码近似于您应该执行的操作。您可能希望更明智地重构它。
Ext.create('Ext.grid.Panel', {
height: 300,
store: main_data,
columns: [
{ text: 'name', dataIndex: 'name', sortable: true },
{ text: 'chart', renderer: function (value, meta, record) {
var id = Ext.id();
Ext.defer(function (id) {
var chart = Ext.create('Ext.chart.Chart', {
store: chart_data,
width: 200,
height: 100,
// other chart configuration...
renderTo: id
});
}, 50, undefined, [id]);
return "<div id='" + id + "'></div>";
} }
]
});
关于Extjs将图表添加到网格列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18326263/