How to apply seriesStyles to piechart in ExtJs dynamically

Question

Hello everybody,

Am trying to set 'seriesstyles' to piechart dynamically from the JSON data. When the 'oneWeekStore' loads the JSON data, I wish to iterate through the 'color' of each record and setSeriesStyles dynamically to PieChart. Below is the snippet.

var oneWeekStore = new Ext.data.JsonStore({
        id:'jsonStore',
         fields: ['appCount','appName'],
         autoLoad: true,
         root: 'rows',
         proxy:storeProxy,
         baseParams:{
                   'interval':'oneWeek',
                   'fromDate':frmDt.getValue()        
         },
         listeners: {load: {
         fn:function(store,records,options) {
         /*I wish iterate through each record,fetch 'color'
           and setSeriesStyles. I tried passing sample arrays 
           as paramater to setSeriesStyles like 

**colors= new Array('0x08E3FE','0x448991','0x054D56');
Ext.getCmp('test12').setSeriesStyles(colors)**   

           But FF throws error "this.swf is undefined". Could 
           you please let me know  the right format to pass as
           parameter.      */   
                  }
    });


var panel = new Ext.Panel{
              id: '1week',                                                        title:'1 week',                                               
         items : [ 
                           { id:'test12',
              xtype : 'piechart', 
              store : oneWeekStore, 
              dataField : 'appCount', 
              categoryField : 'appName',
              extraStyle : {
                                legend:{
                        display : 'right',
                        padding : 5,
                        spacing: 2, font :color:0x000000,family:
                                'Arial', size:9},
                        border:{size :1,color :0x999999},
                        background:{color: 0xd6e1cc}
                                                                           }                                    }                                                             }                                     ]                               }

My JSON data looks below:

{"success":true,"rows":[{"appCount":"9693814","appName":"GED","color":"0xFB5D0D"},{"appCount":"5731","appName":"SGEF"","color":"0xFFFF6B"}]}

Your guidance is highly appreciated

Answer 1

You have a classic race condition there - your setting an event in motion that relies on a Component who's status is unknown.

The event your setting off is the loading of the data Store, when that has finished loading it is trying to interact with the Panel, but at that point we don't know if the Panel has been rendered yet.

Your best bet is to make one of those things happen in reaction to the other, for example:

1 ) load the store

2 ) on load event fired, create the panel

var oneWeekStore = new Ext.data.JsonStore({
     id:'jsonStore',
     ...,
     listeners: {
         load:function(store,records,options) {
              var panel = new Ext.Panel({
                  ...,
                  seriesStyles: colors,
                  ...
              });
         }
     }
});

or

1 ) create the panel (chart)

2 ) on render event of the panel, load the store (remove autoLoad:true)

var panel = new Ext.Panel({
    id: '1week',
    ...,
    listeners: {
        render: function(pnl){
            oneWeekStore.load();
        }
    }
});

Hope that helps.