grid-jsondata not working in extjs3.4 - json

Question

I am trying to use Jsonstore. I am not able to display the data in the grid, lot of empty rows are being displayed.
I want to display the data in testString variable in the grid.
Help me with this?
var testString = new String();
testString = Ext.util.JSON.encode(data);
this is the value in testString
//value Of testString: //[{"dc1":"abcd","dc2":"efg","dc3":"abc","dc4":"abc"}];
Store and grid
var dcStore = new Ext.data.JsonStore({
autoLoad: true,
fields: ['dc1','dc2','dc3','dc4'],
data : testString
});
this.dcGrid = new Ext.grid.GridPanel({
title: 'View',
store: dcStore,
columns:[
{header: 'dc1',dataIndex: 'dc1'},
{header: 'dc2', dataIndex: 'dc2'},
{header: 'dc3', dataIndex: 'dc3'},
{header: 'dc4',dataIndex: 'dc4'}
]
});
If i assign the value to testString directly like this, data will be displayed in grid
var testString = [{"dc1":"abcd","dc2":"efg","dc3":"abc","dc4":"abc"}];
Fiddle Update:
Ext.application({
name : 'Fiddle',
launch : function() {
var testData = {"data":[{"dc1":"re","dc2":"we","dc3":"qw","dc4":"qwe"}]};
var testDataJson = Ext.util.JSON.decode(testData);
var testDataString = Ext.util.JSON.encode(testDataJson);
var dcStore = new Ext.data.JsonStore({
fields: ['dc1','dc2','dc3','dc4'],
data : testDataString
});
var dcGrid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
title: 'View',
store: dcStore,
columns:[
{header: 'dc1',dataIndex: 'dc1'},
{header: 'dc2', dataIndex: 'dc2'},
{header: 'dc3', dataIndex: 'dc3'},
{header: 'dc4',dataIndex: 'dc4'}
]
});
}
});

Answer 1

JsonStores are usually used to pull in data from a remote source in JSON format, This could be from an AJAX request or directly to a JSON file, Then the reader parses this information into the store. If you already have the data locally then you are probably better using an ArrayStore. Also your local data is likely to be in JSON format already as its a JS object.
Also your grid was not configured correctly and only shown the first row for me, I've used the example code for a GridPanel from the API documentation here.
I can't give a direct fix for your issue above without knowing what is in the data variable in this line of code testString = Ext.util.JSON.encode(data); so I've put an example of using both an array store and a remote JSON store below for your reference which should help.
// app.js
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/js/ext-3.4.0/resources/images/default/s.gif';
var arrayData = [
["abc", "abc", "abc", "abc"],
["abc1", "abc1", "abc1", "abc1"],
["abc2", "abc2", "abc2", "abc2"],
["abc3", "abc3", "abc3", "abc3"],
["abc4", "abc4", "abc4", "abc4"]
];
var arrayStore = new Ext.data.ArrayStore({
// store configs
autoDestroy: true,
storeId: 'myStore',
fields: ['dc1', 'dc2', 'dc3', 'dc4'],
data: arrayData
});
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: arrayStore,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'dc1', header: 'dc1', width: 200, sortable: true, dataIndex: 'dc1'},
{header: 'dc2', dataIndex: 'dc2'},
{header: 'dc3', dataIndex: 'dc2'},
{header: 'dc4', dataIndex: 'dc2'}
]
}),
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid'
});
var jsonStore = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad: true,
url: 'data/data.json',
storeId: 'myStore',
// reader configs
root: 'rows',
idProperty: 'dc1',
fields: ['dc1', 'dc2', 'dc3', 'dc4'],
});
var grid2 = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: jsonStore,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'dc1', header: 'dc1', width: 200, sortable: true, dataIndex: 'dc1'},
{header: 'dc2', dataIndex: 'dc2'},
{header: 'dc3', dataIndex: 'dc2'},
{header: 'dc4', dataIndex: 'dc2'}
]
}),
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid'
});
});
// data.json
{
"rows": [{
"dc1": "abc",
"dc2": "abc",
"dc3": "abc",
"dc4": "abc"
}, {
"dc1": "test1",
"dc2": "abc",
"dc3": "abc",
"dc4": "abc"
}, {
"dc1": "test 2",
"dc2": "abc",
"dc3": "abc",
"dc4": "abc"
}]
}