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.

USGS Data in Gri

As shown below in line 20, I use proxy of type JSONP in Ext.data.Store to retrieve the JSON data.

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

Advertisements

9 thoughts on “Display JSON Data using ExtJS 4 Store”

  1. Hi,
    Firstly, Thank you so much..I examine your examples but I can not do it on my project..I can access Jsonwebservise with ExtJs 4 and I want access json on my local.I want to attach ExtJs4 and .Net Web service.Web service send json data and I access json data with ExtJs4 at local.there is a project in this link : http://www.codeproject.com/KB/webservices/ExtJS__WebServices.aspx
    there are the project access json data with ExtJs 3 on the local but I cannot convert it ExtJs4 …Can you help me to write like that project??
    Thanks a lot..

    Thanks again and again,,,,

  2. I finally found my problem, its not Extjs version.
    This may seem stupid, but I was working locally on my Desktop and I was doing a Json request to the server (www.domain.com/json.php).

    You can create your interface without been on server. But if you use form and submit.
    Your website must also be on a server.

    1. hi ,
      i have the same problem ,when i tried the same sample in the previous link it work good with Extjs ,but when i tried it with Extjs4 it does not work for me ,and i can’t find the reason
      could you view me how could you call the Webservices from js file

  3. s perspectives on real estate investing have allowed people
    in deep debt to make some beneficial life-altering changes
    in their personal lifestyles and financial status.
    The statistical information covers what type of mutual funds (stock,
    hybrid, taxable bond, municipal bond, taxable money market and tax free money market funds) have been on the buy list of
    investors. Investment is a concept of restoring the money via purchasing of assets,
    lending loans and fund terms with well planned
    expectation on favourable future returns.

  4. s truly really worth going back house and getting the credit card for purchasing that merchandise.

    It can make the consumer realize the potency of some of
    the factors affecting their credit scores substantially.
    You can find it by requesting a credit history from 3 big credit scoring bureaus – Equifax, Experian and Trans – Union.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s