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