javascript - ExtJS 经典 - 将图表插入工具提示

Question

我是 ExtJS 的新手，所以我不知道是否可能。 Google 只回答如何为图表制作工具提示，所以...

我需要制作一个带有工具提示的网格，当用户将鼠标放在单元格上时将显示该工具提示。在该工具提示中，它需要是基于此网格的存储(这部分是我制作的)的自定义信息和基于同一存储的 PolarChart。

它需要像

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

我尝试在 beforeshow 函数的 tip.update() 内创建一个 PolarChart，但它只返回 Object(Object) 而不是渲染的图表。

我尝试将图表定义为变量来渲染图表，然后像 tip.update(var.render()) 那样渲染它，但它会抛出 Uncaught TypeError: Cannot read属性“dom”未定义错误。

即使我尝试将属性 renderTo 作为变量 tip 或 Ext.getCmp('tipID')，它也会抛出该错误.

所以，我认为它无法到达工具提示的 DOM 节点，因为它是动态创建的。

有什么方法可以解决我的问题吗？

Answer 1

您可以使用动态 tooltip网格上的创作itemmouseenter和 itemmouseleave .

我创建了一个小sencha fiddle演示。

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