1

「seriesstyles」を JSON データから動的に円グラフに設定しようとしています。「oneWeekStore」が JSON データをロードするとき、各レコードの「色」を反復処理し、PieChart に動的に setSeriesStyles を設定したいと考えています。以下はスニペットです。

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

私の JSON データは以下のようになります。

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

ご指導よろしくお願いします

4

1 に答える 1

1

そこには古典的な競合状態があります-ステータスが不明なコンポーネントに依存するイベントを実行中です。

オフに設定したイベントは、データ ストアの読み込みです。読み込みが完了すると、パネルとやり取りしようとしますが、その時点では、パネルがまだレンダリングされているかどうかはわかりません。

あなたの最善の策は、これらのいずれかを他方に反応させて発生させることです。たとえば、次のようになります。

1 ) ストアをロードする

2）ロードイベントが発生したときに、パネルを作成します

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

また

1 ) パネル (チャート) を作成する

2 ) パネルのレンダリング イベントで、ストアをロードします (autoLoad:true を削除します)。

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

それが役立つことを願っています。

于 2010-02-09T18:44:51.937 に答える