How to bind JSON to EXTJS grid - extjs

Question

Can someone explain to me why this isnt working? No errors whatsoever.
Ext.onReady(function () {
//Ext.Msg.alert('Status', 'Changes saved successfully.');
Ext.define('Bond', {
extend: 'Ext.data.Model',
fields: ['CUSIP', 'DESCRIPTION', 'COUPONRATE', 'ASKPRICE']
});
var store = new Ext.data.Store({
model: 'Bond',
proxy: {
type: 'ajax',
url: 'http://localhost:3197/Home/GetSecondaryOfferings',
reader: {
type: 'json',
root: 'items',
totalProperty: 'totalCount'
}
}
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ header: 'CUSIP', dataIndex: 'CUSIP' },
{ header: 'Description', dataIndex: 'DESCRIPTION', width: 100 },
{ header: 'COUPONRATE', dataIndex: 'COUPONRATE', width: 100 },
{ header: 'ASKPRICE', dataIndex: 'ASKPRICE', width: 100 }
],
renderTo: 'example-grid',
width: 1000,
autoHeight: true,
title: 'JSON SIMPLE 2'
}).render();
});
this is what my JSON object look like:
{"totalCount":3316,"items":[{"CUSIP":"989701AL1","DESCRIPTION":"ZIONS BANCORPORATIONSB NT 5.65000% 05/15/2014","COUPONRATE":" 5.650","ASKPRICE":" 104.450"}]}
The grid just doesnt populate, and I can see the JSON being returned to me from the server.
Thoughts?

Answer 1

The problem is the fact that you use a store with the alax/json type. Bacause you have a cross domain URL, the JSON.
Solution: Make sure the test files are hosted using HTTP from the same domain and all should be well:
var store = new Ext.data.Store({
model: 'Bond',
proxy: {
type: 'ajax',
url: 'SOData.json',
reader: {
type: 'json',
root: 'items',
totalProperty: 'totalCount'
}
}
});

Answer 2

try this way
var URLdata = window.location.protocol + "//" + window.location.host + "/" + "bigdata-dashboard" + "/conf/" +"survey.json" ;
var storedata = new Ext.data.Store({
fields: ['appeId','survId','location','surveyDate','surveyTime','inputUserId'],
proxy: {
type: 'rest',
url:URLdata,
reader: {
type: 'json',
root: 'items',
// totalProperty: 'totalCount'
}
}
});
storedata.load();
// create the grid
var grid = new Ext.grid.GridPanel({
store: storedata,
columns: [
{header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
{header: "survId", width: 60, dataIndex: 'survId', sortable: true},
{header: "location", width: 60, dataIndex: 'location', sortable: true},
{header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
{header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
{header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
],
renderTo:'example-grid',
width:470,
height:200
});

Answer 3

you need to change your service to return jsonp and change the store type to be jsonp, that will fix the issue,
Please let me know if you need more information