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