Results 1 to 3 of 3

Thread: changing one chart axes label from controller changes all of them

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    92
    Answers
    6
    Vote Rating
    0
      0  

    Default changing one chart axes label from controller changes all of them

    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:
    Code:
        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:
    Code:
        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);
            }
        });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    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

    Code:
        initComponent : function () {
    
            var me = this;
    
            Ext.applyIf(me, {
                items       : me.buildItems()
            });
    
            me.callParent(arguments);
        },
    Scott,

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    92
    Answers
    6
    Vote Rating
    0
      0  

    Default

    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:
    Code:
    chart_3.axes.map.left.title="test";
    It still affects all 4 charts.

    Here is the initializer for my main panel again:
    Code:
    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);
            }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •