代码之家  ›  专栏  ›  技术社区  ›  Mike Sickler

ext js:formpanel不使用JSON数据填充字段

  •  2
  • Mike Sickler  · 技术社区  · 15 年前

    我有一个包含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}]}
    

    我没有得到任何错误,并且在加载之后表单字段绝对是空的。如何修复此问题,或开始调试它?

    3 回复  |  直到 13 年前
        1
  •  6
  •   wes    15 年前

    如果您查看ext.form.basicForm的文档,它表示JSON支持内置于basicForm中,因此您不需要使用JSONReader将数据加载到表单中。但这不应该伤害你。

    我认为主要的问题可能是,向basicForm加载调用时期望得到这样的JSON响应:

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

    但你的是一个阵列。

    (从 Ext.form.BasicForm.load docs )

    作为旁注,如果你使用的是ext 3.0, hbox 布局比 columns .

        2
  •  2
  •   rodrigoap    15 年前

    它就在那里,你看不到它,因为窗体高度是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'} );          
            });
    

    结果是:

    extjs http://i26.tinypic.com/zjtgg9.jpg

        3
  •  0
  •   MikeC    13 年前

    extjs 4.1现在似乎默认接受 单个数据对象 而不是前面提到的数据数组。

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