Display JSON Data using ExtJS 4 Store
I am sharing a short example of how to display JSON data using ExtJS 4 Store. In previous version of ExtJS, there is a small helper class call JsonStore which is used to simplify creation Stores from JSON data. In ExtJS 4 the class is no longer there. In this example, I am retrieving USGS data as JSON and display it in Grid as shown below.
[caption id=”attachment_534" align=”aligncenter” width=”600" caption=”USGS Data in Gri”]
[/caption]
As shown below in line 20, I use proxy of type JSONP in Ext.data.Store to retrieve the JSON data.
Get Wongso Wijaya’s stories in your inbox
Join Medium for free to get updates from this writer.
[sourcecode language=”javascript”]
Ext.onReady(function(){
Ext.define(‘UsgsList’, {
extend: ‘Ext.data.Model’,
fields: [
{name: ‘fid’, type: ‘int’},
{name: ‘title’, type: ‘string’},
{name: ‘description’, type: ‘string’},
{name: ‘link’, type: ‘string’},
{name: ‘pubDate’, type: ‘date’},
{name: ‘lat’, type: ‘string’},
{name: ‘long’, type: ‘string’}
],
idProperty: ‘fid’
});
var store = Ext.create(‘Ext.data.Store’, {
id: ‘store’,
model: ‘UsgsList’,
proxy: {
type: ‘jsonp’,
url: ‘http://query.yahooapis.com/v1/public/yql',
extraParams: {
q: ‘select * from rss where url=”http://earthquake.usgs.gov/earthquakes/catalogs/eqs7day-M2.5.xml"',
format: ‘json’
},
reader: {
root: ‘query.results.item’,
}
}
});
function renderTitle(value, p, record) {
return Ext.String.format(‘<a href=”{1}” target=”_blank”>{0}</a>’,
value,
record.data.link
);
}
var grid = Ext.create(‘Ext.grid.Panel’, {
width: 700,
height: 500,
title: ‘USGS — M2.5+’,
store: store,
loadMask: true,
disableSelection: true,
invalidateScrollerOnRefresh: false,
viewConfig: {
trackOver: false
},
// grid columns
columns:[{
xtype: ‘rownumberer’,
width: 50,
sortable: false
},{
id: ‘title’,
text: “Title”,
dataIndex: ‘title’,
flex: 1,
renderer: renderTitle,
sortable: false
},{
id: ‘pubDate’,
text: “Published Date”,
dataIndex: ‘pubDate’,
width: 130,
renderer: Ext.util.Format.dateRenderer(‘n/j/Y g:i A’),
sortable: true
}],
renderTo: Ext.getBody()
});
// trigger the data store load
store.load();
});
[/sourcecode]
