PDA

View Full Version : form with json only shows some elements



michael melsen
16 Feb 2010, 12:16 AM
Hi guys,

I have the following strange behavior where some parts of the json are loaded into my form but elements on a higher level in the json hierarchy won't show up. I've tried debugging it but can't find the problem. Perhaps you guys see the problem or can explain why the elements in student.data.studentsInGroup do show up if I set to root of the reader to 'students.data.studentsInGroup, but the elements in students.data like groupCode don't show up if I set the root to students.data.

json

{ "students" : { "class" : "main.java.nl.chronotech.presentation.JsonObjectResponse",
"data" : { "class" : "main.java.nl.chronotech.presentation.StudentGroup",
"extendedDescription" : "testlang",
"groupCode" : "test",
"id" : null,
"shortDescription" : null,
"studentsInGroup" : [ { "achterNaam" : "test",
"adresland" : "Nederland",
"class" : "main.java.nl.chronotech.presentation.Student",
"geboorteDatum" : "1991-11-01",
"geboortePlaats" : "",
"geslacht" : "M",
"huisnummer" : "66",
"huisnummeraanduiding" : "",
"id" : "0002",
"nationaliteit" : "",
"postcode" : "4551 GS",
"roepNaam" : "tset",
"slNummer" : null,
"straatnaam" : "test",
"telefoonnummer" : "061/222-222",
"voorLetters" : "TVS",
"voorNamen" : "Ton",
"voorVoegsels" : "of",
"woonplaats" : "test"
} ]
},
"message" : "loaded!",
"success" : true,
"totalRows" : 0
} }

my form is this:

Ext.ns('StudentGroup');

// create pre-configured grid class
StudentGroup.Details = Ext.extend(Ext.form.FormPanel, {
PAGESIZE: 10,
groupCode: '',
initComponent:function() {

this.reader = new Ext.data.JsonReader({
root:'students.data'
}, [{
name : 'achterNaam',
mapping : 'achterNaam'
}, {
name : 'groupCode',
mapping : 'groupCode'
}, {
name : 'extendedDescription',
mapping : 'extendedDescription'
}, {
name : 'shortDescription',
mapping: 'shortDescription'
}]); // eo jsonreader


var config = {
id: 'studentgroupdetails'
,reader: this.reader
,title: 'Groepinformatie'
,autoScroll: true
,forceLayout: true
,layout: 'form'
,defaultType:'displayfield'
,url: 'ActionHandlerServlet?action=studentGroupSpecificsData'
,items: [{
name: 'achterNaam'
,fieldLabel: 'achterNaam'
}, {
name: 'groupCode'
,fieldLabel: 'groupCode'
}, {
name: 'shortDescription'
,fieldLabel: 'Korte omschrijving'
}, {
name: 'extendedDescription'
,fieldLabel: 'Lange omschrijving'
}]
}; // eo apply

Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
StudentGroup.Details.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {
// call parent
StudentGroup.Details.superclass.onRender.apply(this, arguments);

this.getForm().load({
url: 'ActionHandlerServlet'
,params: {
action: 'studentGroupSpecificsData',
category: this.groupCode
}
});
}
}); // eo extend

// register component
Ext.reg('StudentGroupDetails', StudentGroup.Details);

cheers,

Michael

tobiu
16 Feb 2010, 1:41 AM
look what fields you define in your store and what you send back with json. it does not match.

kind regards,
tobiu

michael melsen
16 Feb 2010, 1:45 AM
Hi Tobiu,

"look what fields you define in your store and what you send back with json. it does not match."

I know that my JSON is containing much more fields than my store, but this should not be the problem as the value 'achterNaam' is displayed if I change the root to students.data.studentsInGroup. Or do you mean an other difference?

cheers,

Michael

tobiu
16 Feb 2010, 2:41 AM
if your root is "students.data.studentsInGroup", then by default, 1 form field should get a value:

achterNaam

if you use "students.data" as root, 3 fields should get a value:

groupCode
extendedDescription
shortDescription

got my point? ;)

kind regards,
tobiu

michael melsen
16 Feb 2010, 2:54 AM
Hi tobiu,

I've managed to work it out. I've found that the id in the first part of JSON which has the value null is the showstopper in this case. By setting the value to a different value than null and changing the form to look like the example below, does result in the items showing up correctly.

thanks for your info Tobiu,

cheers

Michael


Ext.ns('StudentGroupGrading');

StudentGroupGrading.FormPanel = Ext.extend(Ext.form.FormPanel, {


initComponent:function() {

this.reader = new Ext.data.JsonReader({
id: 'id'
,root:'students.data'
}, [{
name : 'groupCode',
mapping : 'groupCode'
}, {
name : 'extendedDescription',
mapping : 'extendedDescription'
}]); // eo jsonreader

var config = {
reader: this.reader
,autoScroll: true
,border:false
,url: 'ActionHandlerServlet?action=studentGroupSpecificsData&category=test'
,waitMsg: 'Data wordt opgehaald, een moment geduld a.u.b.'
,align: 'center'
,bodyStyle: {"background-color" : '#DFE8F6',
"font-family" : "tahoma,arial,verdana,sans-serif"
}
,layout: 'form'
,items: [{
layout: 'form'
,defaultType:'displayfield'
,defaults: {labelStyle: 'background-color: #c5d2df;'}
,items: [{
name: 'groupCode',
fieldLabel: 'groupCode'
}, {
name: 'extendedDescription',
fieldLabel: 'extendedDescription'
}, {
name: 'roepNaam',
fieldLabel: 'Roepnaam'
}, {
name: 'voorLetters',
fieldLabel: 'Voorletters'
}, {
name: 'voorNamen',
fieldLabel: 'Voornamen'
}] // eo items 1
}] // eo items

,title: 'Cijfers toekennen'
}; // eo config object

Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
StudentGroupGrading.FormPanel.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {

// call parent
StudentGroupGrading.FormPanel.superclass.onRender.apply(this, arguments);

this.load();
} // eo onRender
}); // eo extend

// register component
Ext.reg('StudentGroupGradingPanel', StudentGroupGrading.FormPanel);