1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    2
    Vote Rating
    0
    beyoung is on a distinguished road

      0  

    Default Unanswered: Set Gauge Chart Series Values in MVC Controller

    Unanswered: Set Gauge Chart Series Values in MVC Controller


    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
    Code:
    init : function() {
    
            this.control({
                'myviewport panel[region="center"] currenttemps' : {
                    beforerender : this.BeforeDisplayTemps
                }
    
            });
    Controller function
    Code:
      
     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
    Code:
    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',
        }]
    
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Is your for loop in a callback of when the store is loaded?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    2
    Vote Rating
    0
    beyoung is on a distinguished road

      0  

    Default


    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.

    Code:
    series.colorSet = ['#' + gaugecolor, '#ddd'];
    series.field = 'temp' + port;
    Code:
    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
                }
    
            });
        },

Thread Participants: 1

Tags for this Thread