Question

我有一个包含3个字段的FormPanel和一个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支持，因此您不需要使用JsonReader将数据加载到表单中。这应该不会伤害。

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

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

但你的是阵列。

（来自Ext.form.BasicForm.load docs）

作为旁注，如果您使用的是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
 }
}

Ext JS：FormPanel没有用JSON数据填充字段

3 个答案: