Ext JS: FormPanel not populating fields with JSON data

Question

I have a FormPanel with 3 fields and a JsonReader. Here's the setup:

  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'
        }]
    });

Here's how I load the data:

goalPanel.getForm().load({url:'goal/getAnnualSalesGoal', method:'GET',params:myParams} );

Here's the JSON response, as seen in Firebug:

{"items":[{"referenceSales":700000,"salesGoal":749000,"increasePercentage":0.07}]}

I get no errors, and after load the form fields are definitely empty. How can I fix this, or begin to debug it?

score 7 · Accepted Answer · answered Aug 31 '09 at 02:08

7

If you look at the docs for Ext.form.BasicForm, it says that JSON support is built in to BasicForm, so you don't need to use a JsonReader to load data into your form. That shouldn't hurt though.

I think the main problem may be that load calls to BasicForm expect a JSON response like this:

{
    "success": true,
    "data": {
        "referenceSales": 700000,
        "salesGoal": 749000,
        "increasePercentage": 0.07
    }
}

but yours is in an array.

(from the Ext.form.BasicForm.load docs)

As a side note, if you're using Ext 3.0, hbox layout is much easier to deal with than columns.

answered Aug 31 '09 at 02:08

wes

7,795
6
31
41

I've modified the JSON response to look exactly like the above and removed the JsonReader, but the fields are still not populating... – Mike Sickler Aug 31 '09 at 03:08
How are you calling the load? Something like `goalPanel.getForm().load({url: '/your/script.plx'});` ? – wes Aug 31 '09 at 06:28
I had the same problem, the FormPanel required the 'data' property in the response be an array with one item in it just like in the question, otherwise it just didn't do anything. Adding the 'success':true was what fixed it for me. Thanks! – Derek Dahmer Nov 01 '10 at 19:33

score 2 · Answer 2 · edited Apr 18 '19 at 10:48

Its all there, you can't see it because the form height is 0.
Just set it like this:

var goalPanel = new Ext.FormPanel({
    height:100,
    ...

Also there is 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:

and it doesn't work in IE if I don't remove the unused comma in "decimalPrecision: 2," — rodrigoap, Aug 31 '09 at 17:14

score 0 · Answer 3 · answered Jun 13 '12 at 19:02

0

ExtJS 4.1 seems to now default to accepting a single data object instead of a data array, as previously mentioned.

{
 success: true,
 data: {
  field1: value1,
  field2: value2
 }
}

answered Jun 13 '12 at 19:02

MikeC

51
4

Ext JS: FormPanel not populating fields with JSON data

3 Answers3

Linked