extjs - Extjs 将图表添加到网格列

Question

我在 extjs 中有网格视图，但我需要在每一行中显示一个条形图，以显示某些值的百分比。如何在 extjs 中实现这一点？也许这张图片将有助于我想要构建的东西。

Answer 1

实现此目的的一种方法是通过延迟呈现图表。基本上你这样做：

1. 使用自定义渲染器创建您的网格列。
2. 在渲染器中，您输出一个具有已知 id 的 div。这个 div 最终将包含您的图表。
3. 您将调用 (with Ext.defer) 推迟到自定义函数，并传入此 id（以及图表所需的任何信息）。此功能将呈现您的图表。
4. 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>";
        } }

    ]
});