Ext JS：FormPanel不能用JSON數據填充字段

Question

我有一個帶有3個字段和JsonReader的FormPanel。這裏的設置：

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來將數據加載到你的表單中。那應該不會傷害。

我認爲主要的問題可能是負載調用BasicForm期待的JSON響應這樣的：

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

但你是在數組中。

（從Ext.form.BasicForm.load docs）

作爲一個側面說明，如果你使用分機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'});   
     }); 

這是結果：

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

Answer 3

ExtJS的4.1似乎現在默認爲接受單個數據對象，而不是數據陣列，如前面提及。

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