Question

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

我需要使用工具提示制作网格，当用户在单元格上设置鼠标时，将显示该工具提示。在该工具提示中，它需要是一个自定义信息，基于此网格的存储（我已经制作的这部分）和基于同一商店的PolarChart。

它必须像

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

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

我尝试渲染图表并将其定义为变量，然后将其渲染为tip.update(var.render())，但会引发Uncaught TypeError: Cannot read property 'dom' of undefined错误。

即使我尝试将属性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);
             }
         }
     }
 })

ExtJS classic - 将图表插入工具提示

1 个答案: