격자 itemmouseenter
및 itemmouseleave
에 동적 tooltip
만들기를 사용할 수 있습니다.
작은 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);
}
}
}
})
다른 방법을 찾아야합니다. 'showBy' 또는'showAt'를 사용하여 차트를 포함하는 창을 렌더링 할 수 있습니다 ... – Alexander