Ext JS: FormPanel не заполняет поля данными JSON

Question

У меня есть FormPanel с 3 полями и JsonReader. Вот настройки:

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

Вот как я загружаю данные:

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

Вот ответ JSON, как видно из Firebug:

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

Я не получаю ошибок, и после загрузки поля формы определенно пусты. Как я могу это исправить или начать отлаживать?

Answer 1

Если вы посмотрите документы для Ext.form.BasicForm, то там написано, что поддержка JSON встроена в BasicForm, поэтому вам не нужно использовать JsonReader для загрузки данных в вашу форму. Это не должно быть больно.

Я думаю, что основная проблема может заключаться в том, что вызовы load для BasicForm ожидают ответ JSON, подобный этому:

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

но ваш находится в массиве.

(из документов Ext.form.BasicForm.load )

В качестве примечания: если вы используете Ext 3.0, с макетом hbox легче справиться, чем с columns.

Answer 2

Это все там, вы не можете видеть это, потому что высота формы равна 0.
Просто установите это так:

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

Также есть опечатка. Это работает для меня:

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

Это результат:

Answer 3

ExtJS 4.1, по-видимому, теперь по умолчанию принимает отдельный объект данных вместо массива данных, как упоминалось ранее.

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