使用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"}, 
     .... 
    ] 
}