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

    ] 
});