ExtJS classic - ツールチップにグラフを挿入する

Question

私はExtJSで新しくなっているので、可能であれば分かりません。 Googleはグラフにツールチップを作成する方法のみに答えます。

ユーザーがマウスをセルに置いたときに表示されるツールチップでグリッドを作成する必要があります。このツールチップでは、このグリッドのストア（この部分は私が作った）と同じ店舗に基づくPolarChartに基づいて、カスタム情報でなければなりません。

は、それは私がbeforeshow機能にtip.update()内部のPolarChartを作成しようとした

Name:   first 
Date start: 10-02-2017 
Date end:  12-02-2017 
*It is the 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); 
      } 
     } 
    } 
})