Over a million developers have joined DZone.

ExtJs JSON Reader Example

DZone's Guide to

ExtJs JSON Reader Example

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

I received the following email from a reader:

Thank you very much for finding time to read my mail.
It would be greatly helpful, if you could provide me with the code of binding the data dynamically to the DS. I have already generated the data in JSON format via Servlet:

{“success”:true,”campaignList”:[{"NumberOfCampaigns":1,"CamapaignScheduleDate":"Mar 23, 2013 12:00:00 AM"}]}

How do I attach this here..

var store = Ext.create(‘Ext.data.Store’, {
    model: ‘PopulationPoint’,
    data: MY_DATA

Any help would be of great use.
Thanks and regards


There are a couple ways to approach this problem. The linked example that I wrote uses a raw Javascript object to render a pie chart. Lets say your servlet returns JSON in a variable – you could parse this yourself and use the result in the store, but Ext provides the JSONReader for this purpose:
var store = new Ext.data.JsonStore({
    url: '/servlet',
    root: 'campaignList',
    fields: [{name:'NumberOfCampaigns', type: 'int'},
             {name:'CampaignScheduleDate', type:'date'}]
A couple things to note here- this assumes you know the types in advance, and in particular, you want to test dates carefully to make sure you render them in a format Ext can parse.  If needed, you can specify a date format as well, like so: dateFormat: ‘m-d-Y g:i A’

You can add a “mapping” to the fields, to alias columns from the servlet. The root value is optional – if a servlet returns a raw array this is not necessary. You may need to add “totalProperty” to the store as well – this specifies the name of a property in the JSON payload which specifies the total number of records. This is only needed for paging scenarios, where not all the results are returned at once.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda


Published at DZone with permission of Gary Sieling, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}