使用json不能正常工作的填充Extjs图形

使用json不能正常工作的填充Extjs图形

问题描述:

因此,Im试图做的是填充Extjs折线图。我创建了一个JSON商店,从一个远程页面拉出JSON,出于某种原因,我的图没有被填充。使用json不能正常工作的填充Extjs图形

我的继承人分机代码:

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')); 
      } 
     } 
    } 
});  

});

而继承人是应该被填充它的JSON:

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

我无法弄清楚我为什么不会工作的生活。图形轴出现,但该行不渲染。

+0

Call store.load(); – subv3rsion 2011-03-14 17:00:05

+0

嗨, 我面临同样的问题。你有没有想过如何解决它? 谢谢 – 2011-04-25 16:48:35

我有同样的问题,即使store.autoLoad设置为真正

其实,一切工作很好,当我硬编码json结果进入页面。但是当我试图使用ajax从数据库中提取时,该行从未呈现!这也不是从数据库中读取的问题。我证实它确实从数据库中提取。

我解决了这个设置autoLoad并呈现实际的图表后添加store.load()和它的工作完全罚款。

+0

+1个人故事和你自己的修复。感谢您花时间写出答案! – scraimer 2011-12-21 06:57:21

您可能希望将autoLoad属性设置为true,在商店,如:

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

}); 

事实上,证实从http://joefreeman.co.uk/projects/extstock/part-2.html下面的代码不工作,所以几乎可以肯定是自动加载参数,但请查看下面示例中的其他参数。

感谢,

阿尔

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