Ext JS：FormPanel不填充具有JSON数据的字段 [英] Ext JS: FormPanel not populating fields with JSON data

问题描述

我有一个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：顶部'，
框架：true，
 bodyStyle：'padding：5px 5px 0'，
 items：[{
 layout：'column'，
 items： {
 columnWidth：.33，
 layout：'form'，
 items：[{
 fieldLabel：'Reference Sales'，
 xtype：'numberfield'，
名称：'referenceSales'，
读取只有：true，
 disabled：true，
 anchor：'95％'
}] 
}，{
 columnWidth：.33，
 layout： 'form'，
 items：[{
 fieldLabel：'Increase％'，
 name：'increasePercentage'，
 xtype：'numberfield'，
 anchor：' 95％'，
 decimalPrecision：2，
 
} 
}]}，{
 columnWidth：.34，
 layout：'form'，
项目：[{
 fieldLabel：'Sales Goal'，
 name：'salesGoal'，
 xtype：'numberfield'，
 anchor：'95％'，
 decimalPrecision：'2'，
 
}] 
}] 
} ]，
 
按钮：[{
文本：'重新计算'
}] 
}）; 
  

加载数据的方式如下：

  goalPanel.getForm（）。load（{url：'goal / getAnnualSalesGoal'，method：'GET'，params：myParams}）; 
  

这是JSON响应，如Firebug所示：

  {items：[{referenceSales：700000，salesGoal：749000，increasePercentage：0.07}]} 
  

我没有错误，加载后，表单域绝对是空的。如何解决这个问题，或者开始调试？

解决方案

如果您查看Ext.form.BasicForm的文档，它表示JSON支持内置于BasicForm中，因此您不需要使用JsonReader将数据加载到表单中。这个不应该受到伤害。

我认为主要的问题可能是对BasicForm的加载调用期望像这样的JSON响应：

  {
success：true，
data：{
referenceSales：700000，
销售目标：749000，
increasePercentage：0.07 
} 
} 
  

但您的数组是数组。

（从 Ext.form.BasicForm.load docs ）

作为附注，如果您正在使用Ext 3.0， hbox 布局比列更容易处理。

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?

解决方案

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.

这篇关于Ext JS：FormPanel不填充具有JSON数据的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！