Remplissage d'un graphe Extjs avec json ne fonctionnant pas

Question

Donc ce que j'essaie de faire est de remplir un graphe linéaire Extjs. J'ai créé un magasin JSON qui extrait json d'une page distante et, pour une raison quelconque, mon graphique n'est pas rempli.

Heres mon code Ext:

Ext.onReady(function(){ 

var store = new Ext.data.JsonStore({ 
    autoDestroy: true, 
    url: 'http://myURL.com', 
    storeId: 'graphStore', 
    root: 'rows', 
    idProperty: 'date', 
    fields: ['date', 'posts'] 
}); 

new Ext.Panel({ 
    title: 'Posts', 
    renderTo: 'test_graph', 
    width:500, 
    height:300, 
    layout:'fit', 

    items: { 
     xtype: 'linechart', 
     store: store, 
     xField: 'date', 
     yField: 'posts', 
     listeners: { 
      itemclick: function(o){ 
       var rec = store.getAt(o.index); 
       Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('date')); 
      } 
     } 
    } 
});  

});

Et voici le JSON qui est censé être le peuplant:

{"rows":[ 
    {"date":"2010-06-11","posts":4}, 
    {"date":"2010-06-12","posts":3}, 
    {"date":"2010-06-13","posts":1}, 
    {"date":"2010-06-14","posts":2} 
]} 

Je ne peux pas comprendre la vie de mon pourquoi cela ne marchera pas. L'axe du graphique apparaît, mais la ligne ne rend pas.

Answer 1

je le même problème, même avec store.autoLoad ensemble à vrai

En fait, tout fonctionnait super quand j'ai codé en dur les résultats de JSON dans la page. Mais quand j'ai essayé d'utiliser ajax pour le retirer d'une base de données, la ligne n'a jamais été rendue! Ce n'était pas non plus un problème de lecture de la base de données. J'ai vérifié qu'il tirait définitivement de la base de données.

Je résolu ce problème en fixant autoLoad à faux et ajouté store.load() après tableau réel rendu et cela a fonctionné tout à fait bien.

Answer 2

vous pouvez définir la propriété autoLoad true sur le magasin, tels que:

var logsRemoteJsonStore = new Ext.data.JsonStore 
({ 
    proxy: logsRemoteProxy 
    , storeId: 'ourRemoteStore' 
    , autoLoad: true 
    , fields: logsRecordFields 

}); 

En fait, vérifié que le code suivant de http://joefreeman.co.uk/projects/extstock/part-2.html fonctionne, il est donc presque certainement le paramètre autoload, mais passez en revue les autres paramètres dans l'exemple ci-dessous.

Merci,

Aldo

Ext.onReady(function() { 
    var store = new Ext.data.JsonStore({ 
     baseParams: { 
      symbol: 'GOOG' 
     }, 
     autoLoad: true, 
     url: '/CMSAdmin/ReadSiteStatisticsEightMonthSummary/', 
     root: 'data', 
     fields: ['date', 'close'] 
    }); 

    new Ext.Window({ 
     title: 'GOOG', 
     width: 400, 
     height: 300, 
     items: new Ext.chart.LineChart({ 
      store: store, 
      xField: 'date', 
      yField: 'close' 
     }) 
    }).show(); 

}); 

JSON:

{"symbol":"GOOG","start":1279627043,"span":32140800,"data":[{"close":462,"date":"2010-08-20"},{"close":476,"date":"2010-09-09"},{"close":527,"date":"2010-09-28"},{"close":601,"date":"2010-10-15"},{"close":620,"date":"2010-11-03"},{"close":591,"date":"2010-11-22"},{"close":592,"date":"2010-12-10"},{"close":598,"date":"2010-12-30"},{"close":631,"date":"2011-01-19"}]}