ExtJS classic - insert chart into tooltip

Question

I'm new with ExtJS, so I don't know, if it even possible. Google answers only how to make tooltips to charts, so...

I need to make a grid with a tooltips, which will be shown when user set mouse on the cell. In that tooltip it need to be a custom information, based on the store of this grid (this part I've made) and a PolarChart, based on the same store.

It needs to be like

Name:          first
Date start:    10-02-2017
Date end:      12-02-2017
*It is the PolarChart*

I've tried to create a PolarChart inside tip.update() in the beforeshow function, but it only returns Object(Object) instead of rendered chart.

I've tried to render chart with defining it as variable and then render it like tip.update(var.render()), but it throw an Uncaught TypeError: Cannot read property 'dom' of undefined error.

And even if I try to put property renderTo as variable tip or Ext.getCmp('tipID'), it throws that error.

So, I think, it cannot reach DOM node of the tooltip because it creates dynamically.

Is it some ways to resolve my problem?

Answer 1

You can use dynamic tooltip creation on grid itemmouseenter and itemmouseleave.

I have created a small sencha fiddle demo.

function createToolTip(target, data) {
     return Ext.create('Ext.tip.ToolTip', {
         // target: target.id,
         title: 'Company Overview using pie chart',
         width: 200,
         height: 200,
         items: [{
             xtype: 'polar',
             width: 180,
             height: 180,
             theme: 'green',
             interactions: ['rotate', 'itemhighlight'],
             store: {
                 fields: ['name', 'value'],
                 data: data
             },
             series: {
                 type: 'pie',
                 highlight: true,
                 angleField: 'value',
                 label: {
                     field: 'name',
                     display: 'inside'
                 },
                 donut: 30
             }
         }]
     }).showBy(target);
 }

 Ext.create('Ext.grid.Panel', {
     renderTo: Ext.getBody(),
     store: store,
     title: 'Company Data',
     width: '100%',
     columns: [{
         text: 'Company',
         flex: 1,
         sortable: true,
         dataIndex: 'company'
     }, {
         text: 'Price',
         width: 90,
         sortable: true,
         dataIndex: 'price',
         align: 'right',
         renderer: function (v) {
             return Ext.util.Format.usMoney(v)
         }
     }, {
         text: 'Revenue',
         width: 110,
         sortable: true,
         align: 'right',
         dataIndex: 'revenue %',
         renderer: perc
     }, {
         text: 'Growth',
         width: 100,
         sortable: true,
         align: 'right',
         dataIndex: 'growth %',
         renderer: perc
     }, {
         text: 'Product',
         width: 110,
         sortable: true,
         align: 'right',
         dataIndex: 'product %',
         renderer: perc
     }, {
         text: 'Market',
         width: 100,
         sortable: true,
         align: 'right',
         dataIndex: 'market %',
         renderer: perc
     }],

     listeners: {
         itemmouseenter: function (grid, record, item, index, e, eOpts) {
             //If tooltip is already created then first destroy then create new.
             if (grid.customToolTip) {
                 Ext.destroy(grid.customToolTip);
             }
             grid.customToolTip = createToolTip(item, [{
                 name: 'Revenue',
                 value: record.get('revenue %')
             }, {
                 name: 'Growth',
                 value: record.get('growth %')
             }, {
                 name: 'Product',
                 value: record.get('product %')
             }, {
                 name: 'Market',
                 value: record.get('market %')
             }]);
         },
         itemmouseleave: function (grid, record, item, index, e, eOpts) {
             //destory toolTip on mouse out
             if (grid.customToolTip) {
                 Ext.destroy(grid.customToolTip);
             }
         }
     }
 })