CODEWITHSUNDEEP
extjs
Mike Sickler
Mike Sickler

Reputation: 34451

Ext JS: FormPanel not populating fields with JSON data

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?

Upvotes: 2

Views: 23013

Answers (3)

rodrigoap
rodrigoap

Reputation: 7480

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

Upvotes: 2

MikeC
MikeC

Reputation: 51

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
 }
}

Upvotes: 0

wes
wes

Reputation: 8185

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.

Upvotes: 7

Related Questions