PDA

View Full Version : [OPEN]Ext.Chart/ Ext.Draw missing features around handlers



4CastRisk
10 Mar 2011, 4:16 AM
With Ext.Chart, and specifically Ext.Draw I've found that there seems to be no easy way to access series members (i.e. the draw sprites) to attach handlers to them. Also, I've noticed that sprites themselves seem to be missing the 'contextmenu' event handler - so there is no way to attach drill-down menus (for example in a chart opening a form for an item)

Here is a code example:



Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.layout.container.Fit', 'Ext.fx.target.Sprite']);

Ext.onReady(function () {

var store1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1'],
data: [
{name: 'Edinburgh', data1: 40},
{name: 'Glasgow', data1: 74},
{name: 'Aberdeen', data1: 23}
]
});


var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
maximizable: true,
title: 'Assets Per Office',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
id: 'chartCmp',
xtype: 'chart',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Total Assets',
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Office'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}]
}
});

/* There seems to be no easy way to access each series member and attach
a handler to them. Also, 'contextmenu' as an event seems to be missing from
sprites
*/
Ext.each(win.items.items[0].series.items[0].items, function(item) {
item.sprite.on('click', function(sprite, mouseevent) {
var menu = Ext.create('Ext.menu.Menu', {
items: [
{
text: 'Drill Down'
},
'-',
{
text: 'View Owner Series'
}
]
});
menu.showAt(mouseevent.xy)

})
})
});