Ext JS: FormPanel doesn't populate fields with JSON data
I have a FormPanel with 3 fields and a JsonReader. Here's the setting:
var goalPanel = new Ext.FormPanel({
reader: new Ext.data.JsonReader({
idProperty: 'id',
root: 'items',
fields: [
{name: 'referenceSales', type:'float'},
{name: 'increasePercentage', type: 'float'},
{name: 'salesGoal', type: 'float'}
]
}),
labelAlign: 'top',
frame:true,
bodyStyle:'padding:5px 5px 0',
items: [{
layout:'column',
items:[{
columnWidth:.33,
layout: 'form',
items: [{
fieldLabel: 'Reference Sales',
xtype: 'numberfield',
name: 'referenceSales',
readOnly: true,
disabled: true,
anchor:'95%'
}]
},{
columnWidth:.33,
layout: 'form',
items: [{
fieldLabel: 'Increase %',
name: 'increasePercentage',
xtype: 'numberfield',
anchor:'95%',
decimalPrecision: 2,
}
}]},{
columnWidth:.34,
layout: 'form',
items: [{
fieldLabel: 'Sales Goal',
name: 'salesGoal',
xtype: 'numberfield',
anchor:'95%',
decimalPrecision: '2',
}]
}]
}],
buttons: [{
text: 'Recalculate'
}]
});
This is how I load the data:
goalPanel.getForm().load({url:'goal/getAnnualSalesGoal', method:'GET',params:myParams} );
Here's the JSON response as shown in Firebug:
{"items":[{"referenceSales":700000,"salesGoal":749000,"increasePercentage":0.07}]}
I get no errors and after loading the form fields are definitely empty. How can I fix this or start debugging it?
source to share
If you look at the docs for Ext.form.BasicForm, it says JSON support is built into BasicForm, so you don't need to use JsonReader to load data into your form. It shouldn't hurt, though.
I think the main problem might be that load requests on the BasicForm are expecting a JSON response like this:
{
"success": true,
"data": {
"referenceSales": 700000,
"salesGoal": 749000,
"increasePercentage": 0.07
}
}
but yours is in an array.
(from Docs Ext.form.BasicForm.load )
As a side note, if you're using Ext 3.0, layout is hbox
much easier to deal with than anything columns
.
source to share
It's all there, you can't see it because the height of the form is 0.
Just set it like this:
var goalPanel = new Ext.FormPanel({
height:100,
...
There is also a typo. This works for me:
Ext.onReady(function() {
var goalPanel = new Ext.FormPanel({
reader: new Ext.data.JsonReader({
idProperty: 'id',
root: 'items',
fields: [
{name: 'referenceSales', type:'float'},
{name: 'increasePercentage', type: 'float'},
{name: 'salesGoal', type: 'float'}
]
}),
labelAlign: 'top',
frame:true,
bodyStyle:'padding:5px 5px 0',
height:100,
items: [{
layout:'column',
items:[{
columnWidth:.33,
layout: 'form',
items: [{
fieldLabel: 'Reference Sales',
xtype: 'numberfield',
name: 'referenceSales',
readOnly: true,
disabled: true,
anchor:'95%'
}]
},{
columnWidth:.33,
layout: 'form',
items: [{
fieldLabel: 'Increase %',
name: 'increasePercentage',
xtype: 'numberfield',
anchor:'95%',
decimalPrecision: 2,
}
]},{
columnWidth:.34,
layout: 'form',
items: [{
fieldLabel: 'Sales Goal',
name: 'salesGoal',
xtype: 'numberfield',
anchor:'95%',
decimalPrecision: '2',
}]
}]
}]
,buttons: [{text: 'Recalculate'}]
});
goalPanel.getForm().load({url:'data.txt', method:'GET'} );
});
This is the result:
source to share