Extjs добавить диаграмму в столбец сетки

Question

У меня был вид сетки в extjs, но мне нужно показать гистограмму в каждой строке, которая показывает процент от некоторых значений. Как это можно достичь в extjs? Возможно, этот образ поможет мне построить.

Answer 1

Один из способов сделать это через отложенный рендеринг диаграммы. В основном вы делаете это:

1. Создайте столбец сетки с помощью специального средства визуализации.
2. В рендерере вы выводите div с известным идентификатором. Этот div в конечном счете будет содержать вашу диаграмму.
3. Вы откладываете вызов (с Ext.defer) к пользовательской функции, передавая этот идентификатор (и любую необходимую информацию для вашей диаграммы). Эта функция отобразит вашу диаграмму.
4. Внутри этой функции вы создаете диаграмму и делаете ее 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>"; 
     } } 

    ] 
});