Populate ExtJS combobox with JSON

Question

I am using ExtJS (3) and just trying to populate a combobox/drop down using records from the database that are being queried using JSON.

Here is my JSON call:

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

And then my combobox code:

{
    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
}

The JSON is returning my data like this:

[
   {
      "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"
   }
]

I think I am close, I just don't see what I am missing to make the connection.

Thanks for any assistance.

Matt Dodge · Accepted Answer · 2012-06-26T01:07:35.633

2

The first step I would do would be to output the store (or size of the store or something) to the console to see if the data is getting loaded properly into the store.

My guess would be that you need to enclose your JSON that is returned into some root object. Try giving your store a JSONReader with a root element specified like so:

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' ]
});

Then change the JSON returned to look like this instead

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

edited Jun 26 '12 at 01:07

answered Jun 25 '12 at 23:02

Matt Dodge

10,833
7
38
58

how do I go about chaning the JSON that is returned? I'm not sure how to do it or what that is called – Mike Jun 25 '12 at 23:38
@Mike Or actually, now that I look at it is it just pulling from a JSON file? Just edit it like a text document – Matt Dodge Jun 25 '12 at 23:41
I was able to change the code that returns the JSON so now it appears like what you have listed: {"projects" : [[{"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"}]]} but when I add in the lines: reader: new Ext.data.JsonReader( { root: 'projects' }, I get an error and Firebug is telling me 'missing ) after argument list' – Mike Jun 26 '12 at 00:00
I guess there is something wrong with how my store is being created - in Firebug, the 'projectDropDown' variable has no data items in it....? – Mike Jun 26 '12 at 00:29
okay, well, I found the issue and got it fixed, it was in the code that was querying the database, I used a snippet of code from another file to test and it worked so I have been comparing the two and it is populating now, at least it works - thanks for your help – Mike Jun 26 '12 at 00:39
@Mike oh yeah that is because I forgot to include the missing closing paren after the JsonReader instantiation. I have edited the code to include the missing one. Glad it's working – Matt Dodge Jun 26 '12 at 01:07

Populate ExtJS combobox with JSON

1 Answers1