Extjs将图表添加到网格列

Question

我在extjs中有网格视图，但是我需要在每行显示一个条形图来显示一些值的百分比。在extjs中如何实现这一点？也许这个图像将帮助我想要建立。做到这一点

Answer 1

一种方式是通过图表的延迟渲染。基本上你这样做：

1. 使用自定义渲染器创建您的网格列。
2. 在渲染器中，您输出一个已知ID的div。这个div最终将包含你的图表。
3. 您将一个电话（与Ext.defer）推迟到一个自定义函数，传入此id（以及您的图表的任何必需信息）。该功能将呈现您的图表。
4. 在该函数中，您创建了一个图表并使用您的传入ID使其成为renderTo元素。

该代码近似于您应该执行的操作。您可能会想要更明智地重构它。

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

    ] 
});