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