PDA

View Full Version : changing one chart axes label from controller changes all of them



alex9311
30 Oct 2013, 9:29 AM
I've got a dashboard with several charts, all of the same class. I assign each chart an ID so I can access them individually from the controller and change their labels/data. I made a function in my controller that gets called once the app gets rendered where I want to set the chart labels and such. For some reason, when I select a chart by its ID and try to change the label, it affects all the charts in my app. Why is this happening?

Here is what the main panel declaration looks like:


Ext.define('COMP.view.MainPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mainpanel',
title: 'Comparison',
layout: {type: 'vbox', align:'center'},
items: [{
xtype:'container',
itemId:'hchartbox',
width:'100%',
flex:30,
layout:'hbox',
items:[{
xtype: 'columnchart',
id:'chart1',
height:'100%',
flex:50,
},{
xtype: 'columnchart',
id:'chart2',
height:'100%',
flex:50,
}],
},{
xtype:'container',
flex:30,
width:'100%',
layout:'hbox',
items:[{
xtype: 'columnchart',
id:'chart3',
height:'100%',
flex:50,
},{
xtype: 'columnchart',
id:'chart4',
height:'100%',
flex:50,
}],
}],
initComponent: function(){
this.callParent(arguments);
}
});


Here is my controller:


Ext.define('COMP.controller.ComparisonController', {
extend: 'Ext.app.Controller',
models: ['Buckets'],
stores: ['Buckets'],
views: [
'MainPanel',
'Grid',
'ColumnChart',
],
init: function(){
this.control({
'mainpanel' : {render:this.onMainViewRender},
});
},
onMainViewRender: function() {
Ext.EventManager.onWindowResize( this.browserResize, this );
this.setData();
},
browserResize: function(){
var mainpanel = Ext.ComponentQuery.query('mainpanel')[0];
mainpanel.setWidth(window.innerWidth);
mainpanel.setHeight(window.innerHeight-50);
},
setData: function(){
var mainpanel = Ext.ComponentQuery.query('mainpanel')[0];
chart_2 = mainpanel.down('#chart2');
chart_2.axes.map.left.title="derpp";
console.log(chart_2.axes);
}
});

scottmartin
1 Nov 2013, 5:32 AM
Have have your items added to the define .. so when you create an instance, you are changing all references.

Create the items when you initialize



initComponent : function () {

var me = this;

Ext.applyIf(me, {
items : me.buildItems()
});

me.callParent(arguments);
},


Scott,

alex9311
1 Nov 2013, 9:31 AM
Thanks for the reply!

I moved my item declaration to the initializer but I am still getting the weird issue with the axis all being renamed. If I select a chart by id in the controller and bindStore() to it, it only affects the one I selected. If I select and axis by id and do something like:

chart_3.axes.map.left.title="test";
It still affects all 4 charts.

Here is the initializer for my main panel again:

initComponent: function(){
var me = this;
Ext.applyIf(me, {
items :
[{
xtype:'container',
itemId:'hchartbox',
width:'100%',
flex:30,
layout:'hbox',
items:[{
xtype: 'columnchart',
id:'chart1',
height:'100%',
flex:60,
store:'Chart1Store',
},{
xtype: 'columnchart',
id:'chart2',
height:'100%',
flex:60,
store:'Chart2Store',
}],

},{
xtype:'container',
flex:30,
width:'100%',
layout:'hbox',
items:[{
xtype: 'columnchart',
id:'chart3',
height:'100%',
flex:50,
store:'Chart3Store',
},{
xtype: 'columnchart',
id:'chart4',
height:'100%',
flex:50,
store:'Chart4Store',
}],
}]
});

this.callParent(arguments);
}