PDA

View Full Version : How to load the local JSON data into the grid at runtime



gvsinghal
3 Aug 2011, 1:41 AM
I have a query regarding the JSON.

We are populating a grid , which is getting response from the server in the XML form and the data size is more than 500 records. But the data is not rendering in the grid. I think the issue is of data size (500 records).

Now we want to render the records into the grid with the help of JSON. To do this thing, firstly we will want to convert the XML into JSON object. I will get the XML from the Ajax call. Suppose our JSON string for 1 record is

var jSource = '{"success":true:{"CsoInfo":[{"CsoNumber":"1-3006009323-12","MfrModel":"E5515C","SerialNumber":"GB43345182","AssetId":"","SOType":"RTA","Status":"update"}]}}';
var myReader = new Ext.data.JsonReader({
root: 'CsoInfo'
},Ext.data.Record.create([{name: 'CsoNumber'},{name: 'MfrModel'},{name: 'SerialNumber'},{name: 'AssetId'},{name: 'SOType'},{name: 'Status'}])
);


Prerequiste:

The store is already created in another file and we are including that file in HTML file. The store reference is passing in the grid store.

Initial Data Store defination for Grid:

Ext.namespace('Ext.data');
Ext.data.CSO = new Ext.data.JsonStore({
root: 'CsoInfo',
field:[ { name: 'CsoNumber', type:'string'},
{ name: 'MfrModel', type: 'string' },
{ name: 'SerialNumber', type: 'string'},
{ name: 'AssetId', type: 'string'},
{ name: 'SOType', type: 'string'},
{ name: 'Status', type: 'string'}
]
});

Ext.reg('csodata', Ext.data.CSO);

Data defination of grid is:

xtype: 'grid',
title: 'SO List',
id: 'grid_solist',
colspan: 6,
width: 566,
style: 'padding-left:50px',
height: 200,
stripeColumns: true,
stripeRows: true,
columnLines: true,
hidden: false,
store: Ext.data.CSO,

The screen initially contains the grid without data. The JSON data should be populated into the grid by pressing the 'Apply' button. How could I do this?

Bunneh
3 Aug 2011, 2:24 AM
Try using store.loadData method with your data passed to it as the first argument. Use Ext.decode to parse the Json.

gvsinghal
3 Aug 2011, 3:36 AM
I am trying with the following code, but getting an error

Expected '}'

code:
var jSource = '{"success":true:{"CsoInfo":[{"CsoNumber":"1-3006009323-12","MfrModel":"E5515C","SerialNumber":"GB43345182","AssetId":"","SOType":"RTA","Status":"update"}]}}';
Ext.data.CSO.loadData(Ext.util.JSON.decode(jSource));

Initial Data Store defination for Grid:

Ext.namespace('Ext.data');
Ext.data.CSO = new Ext.data.JsonStore({
root: 'CsoInfo',
fields: [ { name: 'CsoNumber', type:'string'},
{ name: 'MfrModel', type: 'string' },
{ name: 'SerialNumber', type: 'string'},
{ name: 'AssetId', type: 'string'},
{ name: 'SOType', type: 'string'},
{ name: 'Status', type: 'string'}
]

});

Ext.reg('csodata', Ext.data.CSO);

gvsinghal
3 Aug 2011, 3:52 AM
If I changed the JSON (including count) then I get the "length is null or not an object" error.

var jSource = '{"success":true,"result":{"count":1,"CsoInfo":[{"CsoNumber":"1-3006009323-12","MfrModel":"E5515C","SerialNumber":"GB43345182","AssetId":"","SOType":"RTA","Status":"update"}]}}';

grubby69
3 Aug 2011, 4:25 AM
You have to put the } before the last ) :


var myReader = new Ext.data.JsonReader({
root: 'CsoInfo'
},Ext.data.Record.create([{name: 'CsoNumber'},{name: 'MfrModel'},{name: 'SerialNumber'},{name: 'AssetId'},{name: 'SOType'},{name: 'Status'}])
);

bye

gvsinghal
3 Aug 2011, 4:42 AM
I already created the data store defination for the JSON and I can't change it.

Ext.namespace('Ext.data');
Ext.data.CSO = new Ext.data.JsonStore({
root: 'CsoInfo',
fields: [ { name: 'CsoNumber', type:'string'},
{ name: 'MfrModel', type: 'string' },
{ name: 'SerialNumber', type: 'string'},
{ name: 'AssetId', type: 'string'},
{ name: 'SOType', type: 'string'},
{ name: 'Status', type: 'string'}
]
});

Ext.reg('csodata', Ext.data.CSO);