PDA

View Full Version : Grid with JsonStore



GoneIn20Seconds
1 Sep 2009, 4:32 PM
I've got a grid that I'm trying to populate with a JsonStore response.

An exception is thrown when I try to load and here is what I know about it:


Type: response
Action: read
Response: {
"tId":2,
"status":200,
"statusText":"OK",
"responseText": "[
{
\"questionId\":540,
\"question\":\"Some text here\",
\"answerId\":379,
\"correctQuestion\":0.55,
\"helpfulAnswer\":0.55,
\"lastModifyBy\":\"Bob\",
\"lastModifyDate\":\"2009-08-25 16:13:41\"
}
]"
}
And here is the grid:



new Ext.grid.GridPanel({
region: "center",
title: "Results",
stateful: true,
stateId: "QuestionResultsGrid",
stripeRows: true,
autoExpandColumn: 'question',
store: new Ext.data.JsonStore({
autoDestroy: true,
autoLoad: true,
baseParams: {
searchString: "when admissions deadline", //Ext.getDom("QuestionSearchBox").value,
who: 0,
category: 0
},
url: "ajax/question_search.php",
storeId: "QuestionResultsStore",
//root: "questions",
idProperty: "questionId",
fields: [
{name: "questionId", type: "integer"},
"question",
{name: "answerId", type: "integer"},
{name: "correctQuestion", type: "float"},
{name: "helpfulAnswer", type: "float"},
"lastModifyBy",
{name: "lastModifyDate"}
],
listeners: {
load: function(obj, records, opts) {
alert(records.length + " records loaded.");
},
exception: function(obj, type, action, opts, response) {
alert("a load exception occured\nType: " + type + "\nAction: " + action + "\nResponse: " + JSON.stringify(response));
}
}
}),
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 100,
sortable: true
},
columns: [
{id: "QuestionId", header: "Question ID", width: 50, sortable: true, dataIndex: "questionId", hidden: true},
{header: "Question", sortable: true, dataIndex: "question"},
{header: "Answer ID", width: 30, sortable: true, dataIndex: "answerId"},
{header: "Correct Question", width: 40, sortable: true, dataIndex: "correctQuestion"},
{header: "Helpful Answer", width: 40, sortable: true, dataIndex: "helpfulAnswer"},
{header: "Last Modified By", width: 40, sortable: true, dataIndex: "lastModifyBy"},
{header: "Last Modified", width: 40, sortable: true, dataIndex: "lastModifyDate", xtype: "datecolumn", format: "M d, Y"}
]
}),
viewConfig: {
forceFit: true
}
})
The grid is within a border layout, but I didn't include all of that code.

As this is my first grid and also my first run at the JsonStore, I am pretty stumped. I've double checked that the columns within the column model match those of the fields in the datagrid and also those being returned by the JsonStore. Any idea why the exception is being thrown?

Thank you much for your help.

2 Sep 2009, 2:48 AM
why are you escaping the double quotes?

Condor
2 Sep 2009, 3:49 AM
why are you escaping the double quotes?

I don't think the OP is doing that on purpose (it's probably caused by using JSON.stringify). Could you post what responseText actually contains?

alert("a load exception occured\nType: " + type + "\nAction: " + action + "\nResponse: " + response.responseText);

ps. Your autoExpandColumn is wrong (there is no column with id:'question').

2 Sep 2009, 3:58 AM
Makes no sense, why are not all of the quotes escaped?

Condor
2 Sep 2009, 4:02 AM
Which quotes aren't escaped? responseText is a string, so obviously all double quotes inside need to be escaped to create proper JSON.

2 Sep 2009, 4:07 AM
Ah!! Good catch. I didn't notice the encapsulating double quotes.

2 Sep 2009, 4:08 AM
The first issue i see is that there is no root property set for the JsonStore.

2 Sep 2009, 4:10 AM
Another issue i see is the use of autoExpandColumn and setting the viewConfig with forceFit : true. I don't think these two can be used together.

Condor
2 Sep 2009, 4:51 AM
No root is correct (the JSON data itself is an array).

forceFit has precedence over autoExpandColumn (so the autoExpandColumn config option is irrelevant).

2 Sep 2009, 4:59 AM
Correct. For some reason, I was thinkng that the root param must be at least an empty string if loading data like that. Duh.

GoneIn20Seconds
2 Sep 2009, 5:20 AM
I'm surprised at all the feedback this morning, but greatful for it. Thank you both for your responses. At this point I have commented out the autoExpandColumn and am just using force fit. Also, using the response.responseText this is the output I get for the response:



[
{
"questionId":540,
"question":"Some text here",
"answerId":379,
"correctQuestion":0.55,
"helpfulAnswer":0.55,
"lastModifyBy":"Bob",
"lastModifyDate":"2009-08-25 16:13:41"
}
]
So, just to double check, I don't need to specify root because the JSON returned is an array. Also, is there anything else wrong with my grid or my store that is causing this exception instead of filling in the grid?

Thanks again for the help.

Condor
2 Sep 2009, 5:54 AM
You would have noticed that something is wrong when you inspected the last parameter:

exception: function(obj, type, action, opts, response, e) {
alert("a load exception occured\nType: " + type + "\nAction: " + action + "\nResponse: " + response.responseText + "\nError: " + e);
}
The error is caused by an invalid field type ('integer' -> 'int').

ps. lastModifyDate should be of type:'date' and have a suitable dateFormat.

GoneIn20Seconds
2 Sep 2009, 6:01 AM
That solved it. I love the things I learn from you guys. Thanks a ton for the help.