使用JSON填充ExtJS組合框

Question

我正在使用ExtJS（3）並嘗試使用來自使用JSON查詢的數據庫中的記錄來填充組合框/下拉列表。

這是我的JSON調用：

var projectDropDown = new Ext.data.Store({
    autoLoad: true,
    url: 'dropdown.json',
    storeId: 'projectDropDown',
    idProperty: 'ProjectID',
    fields: [ 'ProjectID', 'ProjectName' ]
});

然后我的組合框代碼：

{
    xtype: 'combo',
    id: 'ProjectName',
    fieldLabel: 'Project Name',
    valueField: 'ProjectID',
    displayField: 'ProjectName',
    store: projectDropDown,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all',
    emptyText:'Select a Project...',
    selectOnFocus:true
}

JSON正在返回我的數據：

[
   {
      "ProjectID":"1",
      "ProjectName":"Mike's Test Project"
   },
   {
      "ProjectID":"2",
      "ProjectName":"My Second Test Project"
   },
   {
      "ProjectID":"3",
      "ProjectName":"My Third Project"
   },
   {
      "ProjectID":"6",
      "ProjectName":"More testing from me"
   }
]

我想我很親近，我只是看不到我錯過了什么來建立連接。

謝謝你的幫助。

Answer 1

我要做的第一步是將商店（或商店或商品的大小）輸出到控制台，以查看數據是否正確加載到商店中。

我的猜測是你需要將你的JSON包含在一些根對象中。 嘗試為您的商店提供一個JSONReader，其中包含如下指定的root元素：

var projectDropDown = new Ext.data.Store({
    autoLoad: true,
    url: 'dropdown.json',
    storeId: 'projectDropDown',
    reader: new Ext.data.JsonReader(
    {
        root: 'projects'
    }),
    idProperty: 'ProjectID',
    fields: [ 'ProjectID', 'ProjectName' ]
});

然后將返回的JSON更改為這樣

{
    "projects" : [
       {"ProjectID":"1","ProjectName":"Mike's Test Project"},
       {"ProjectID":"2","ProjectName":"My Second Test Project"},
       ....
    ]
}