Extjs add chart to grid column

Question

I had grid view in extjs, but i need to show a bar chart in each row that show a percentage of some values. How can achieve this in extjs? Maybe this image will help what i want to build.

Answer 1

One way to accomplish this is through deferred rendering of your chart. Basically you do this:

1. Create your grid column with a custom renderer.
2. In the renderer, you output a div with a known id. This div will ultimately contain your chart.
3. You defer a call (with Ext.defer) to a custom function, passing in this id (and any required info for your chart). This function will render your chart.
4. Inside that function, you create a chart and make it renderTo the element with your passed-in id.

This code approximates what you should do. You will probably want to refactor it more sensibly.

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

    ]
});