2

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?

3 Answers 3

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.

3
  • I've modified the JSON response to look exactly like the above and removed the JsonReader, but the fields are still not populating... Aug 31, 2009 at 3:08
  • How are you calling the load? Something like goalPanel.getForm().load({url: '/your/script.plx'}); ?
    – wes
    Aug 31, 2009 at 6: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! Nov 1, 2010 at 19:33
2

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:

extjs

2
  • Thanks for your detailed answer. Where's the typo? Aug 31, 2009 at 16:22
  • and it doesn't work in IE if I don't remove the unused comma in "decimalPrecision: 2,"
    – rodrigoap
    Aug 31, 2009 at 17:14
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
 }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.