Extjs add chart to grid column -

i had grid view in extjs, need show bar chart in each row show percentage of values. how can achieve in extjs? maybe image want build.

one way accomplish through deferred rendering of chart. this:

1. create grid column custom renderer.
2. in renderer, output div known id. div contain chart.
3. you defer call (with ext.defer) custom function, passing in id (and required info chart). function render chart.
4. inside function, create chart , make renderto element passed-in id.

this code approximates should do. want refactor 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>";         } }      ] });