PDA

View Full Version : Retrieve chart axes or series via ComponentQuery



marco.napetti
6 May 2014, 1:36 AM
Hello everybody,
is there a way to retrieve a chart axe or serie via ComponentQuery?
I really need this because I want to control chart elements via controller.

Maybe I'm doing something wrong?

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});

Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 800,
height: 600,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Test',
handler: function() {
try {
console.log(Ext.ComponentQuery.query('#test [axeId=a1]'));
} catch(e) { console.log(e); }
}
}
]
}],
items: [
{
xtype: 'chart',
animate: true,
store: store,
itemId: 'test',
axes: [
{
axeId: 'a1',
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
axeId: 'a2',
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
serieId: 's1',
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}
]
}
]
});

marco.napetti
6 May 2014, 4:58 AM
I've found a simple solution: ComponentQuery relies on getRefItems to scan sub elements, so adding this method to the chart does the trick:

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});

Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 800,
height: 600,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Test',
handler: function() {
try {
console.log(Ext.ComponentQuery.query('#test [axeId=a1]'));
} catch(e) { console.log(e); }
}
}
]
}],
items: [
{
xtype: 'chart',
animate: true,
store: store,
itemId: 'test',
axes: [
{
axeId: 'a1',
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
axeId: 'a2',
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
serieId: 's1',
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}
],
getRefItems: function(deep) {
var result = [],
fAdder = function(oElement) {
result.push(oElement);
};

this.axes.each(fAdder);
this.series.each(fAdder);

return result;
}
}
]
});