PDA

View Full Version : Set Gauge Chart Series Values in MVC Controller



beyoung
5 Mar 2012, 10:43 AM
I'm trying to change the colorSet and field values of a series in a gauge chart within an MVC controller.

My code below is successful in setting both values however it sets all of the components in the container to the same values. Only the last values in the loop get displayed correctly in each gauge instance. My goal is to set the individual values for each gauge so they display different colors and have unique field values.

I've come at this problem a number of different ways but have not been able to figure out a solution. It seems like this should work given I'm setting only a single series of one gauge chart at a time. Why are all of the charts getting set to the same values?

I'm using Ext JS 4.0.7 with Chrome.

Controller


init : function() {

this.control({
'myviewport panel[region="center"] currenttemps' : {
beforerender : this.BeforeDisplayTemps
}

});


Controller function


BeforeDisplayTemps : function() {

var gauges = (Ext.ComponentQuery.query('chart'));

this.getPortSettingsStore().load
for( port = 1; port <= (gauges.length); port++) {

var record = this.getPortSettingsStore().findRecord('physical_name', 'Port-' + port, 0, true, true, true);

if(record != null) {

//Start at array index 0
var gauge = gauges[port - 1];

var series = gauge.series.last();

var gaugecolor = record.data.gauge_color;
series.colorSet = ['#' + gaugecolor, '#ddd'];
series.field = 'temp' + port;
}
}
}



View


Ext.define('Boil.view.user.CurrentTemps', {
extend : 'Ext.container.Container',
alias : 'widget.currenttemps',

requires : ['Boil.view.user.OneGauge'],

width : 250,
layout : {
type : 'vbox',
align : 'center',
},
border : 1,

items : [{
xtype : 'onegauge',
itemId : 'gaugeInstance1',
}, {
xtype : 'onegauge',
itemId : 'gaugeInstance2',
}, {
xtype : 'onegauge',
itemId : 'gaugeInstance3',
}]

});

mitchellsimoens
5 Mar 2012, 10:52 AM
Is your for loop in a callback of when the store is loaded?

beyoung
5 Mar 2012, 11:31 AM
I'm not sure I understand your question: "Is the loop in a callback?".

The store is setup in the controller and loaded in the "BeforeDisplayTemps" function. See code below. The for loop is just part of the function that is called when beforerender is fired. Reading from both stores is working perfectly the values are expected. Each pass through the loop changes the displayed color and field values to the expected values. The problem is that all charts are changed to the same color and same field value.

I think the issue is with the following lines setting all the series values in the container.



series.colorSet = ['#' + gaugecolor, '#ddd'];
series.field = 'temp' + port;




Ext.define('Boil.controller.CurrentTemps', {
extend : 'Ext.app.Controller',
controllers : ['CurrentTemps'],
views : ['Viewport', 'user.NorthPanelTools', 'user.CurrentTemps'],
stores : ['RawTemps', 'PortSettings'],

refs : [{
selector : 'viewport > panel > northpaneltools',
ref : 'northPanelTools' // this.getNorthPanelTools()
}],

init : function() {

this.control({

'panel[region="center"] currenttemps' : {
added : this.HideTools
},
'myviewport panel[region="center"] currenttemps onegauge' : {
afterrender : this.DisplayTemps
},
'myviewport panel[region="center"] currenttemps' : {
beforerender : this.BeforeDisplayTemps
}

});
},