Question

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.

友情链接