Comment appliquer des styles series à piechart dans ExtJs dynamiquement

Question

Je tente de définir dynamiquement 'seriesstyles' sur piechart à partir des données JSON. Lorsque le 'oneWeekStore' charge les données JSON, je souhaite passer itérativement la couleur de chaque enregistrement et setSeriesStyles dynamiquement à PieChart. Voici l'extrait.

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} 
                      }         }                }          ]        } 

Mes données JSON regarde ci-dessous:

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

Vos conseils sont très appréciés

Answer 1

Vous avez une condition de course classique là - votre création d'un événement en mouvement qui repose sur un composant qui est le statut est inconnu. L'événement que vous avez défini est le chargement du magasin de données, quand il a fini de charger, il essaie d'interagir avec le Panel, mais à ce moment nous ne savons pas si le Panel a déjà été rendu.

Votre meilleur pari est de faire une de ces choses se produisent en réaction à l'autre, par exemple:

1) charger le magasin

2) sur l'événement de charge tiré, créez le panneau

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

ou

1) créer le panneau (graphique)

2) sur événement render du panneau, chargez le magasin (enlever autoLoad: true)

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

espoir qui aide.