Why can't I get a simple Combobox to work in EXTjs 4 using a JSONStore?

Question

This is driving me insane. I have a JS file that is:

  Ext.onReady(function(){
     Ext.QuickTips.init();

     var SitesStore = new Ext.data.JsonStore({
        autoLoad: true,
        fields: [{
           name: 'id',
           mapping: 'id'
        }, {
           name: 'name',
           mapping: 'name'
        }],
        proxy: {
           type: 'ajax',
           url : '/sites/getsites.do'
        },
        storeId: 'SitesStore',
        root: 'sites',
        url: '/sites/getsites.do',
        xtype: 'jsonstore'
     });

     SitesStore.load(function(data){
        Ext.create('Ext.form.ComboBox', {
           fieldLabel: 'Choose Site...',
           store: SitesStore,
           data: data[0].raw["sites"],
           queryMode: 'remote',
           displayField: 'name',
           valueField: 'id',
           renderTo: "timesheetSearch"
        });

        console.log(data[0].raw["sites"]);
     });

  }); //end onReady

My /sites/getsites.do returns JSON data in the following format:

{
    -sites: [
        -{
            id: "12345678"
            name: "Blah Warehouse"
        },
        -{
            id: "5999B91DF6C0"
            name: "WalMart Warehouse"
        },
        ...
}

I realize the data[0].raw["sites"] probably isn't the preferred way to access the data but I do confirm that the data is being populated and I'm getting back 136 sites.

The combobox DOES render. However, the live search doesn't work and there are no entries.

I'm new to ExtJS.

Any tips would be appreciated.

Thanks

UPDATE

This code WORKS

var SitesStore = Ext.create('Ext.data.Store', {
    autoLoad: true,
    fields: ['id','name'],
    data: [{'id':'aaaa', 'name':'Honeywell'}],
    storeId: 'SitesStore',
    root: 'sites'
});

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose Site...',
    store: SitesStore,
    queryMode: 'remote',
    displayField: 'name',
    triggerAction: 'all',
    valueField: 'id',
    renderTo: "timesheetSearch"
});

This does NOT

var SitesStore = Ext.create('Ext.data.Store', {
    autoLoad: true,
    fields: ['id','name'],
    proxy: {
        type: 'ajax',
        url: '/sites/getsites.do'
    },
    storeId: 'SitesStore',
    root: 'sites'
});

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose Site...',
    store: SitesStore,
    queryMode: 'remote',
    displayField: 'name',
    triggerAction: 'all',
    valueField: 'id',
    renderTo: "timesheetSearch"
});

When I run it without a proxy (and specify a url) I get an error saying I didn't specify a proxy.

Thanks

UPDATE

UGH!!!!!!

I got it. Here is the correct JSONStore

var SitesStore = Ext.create('Ext.data.Store', {
    autoLoad: true,
    fields: ['id','name'],
    proxy: {
        type: 'ajax',
        url: '/sites/getsites.do',
        reader: {
            type:'json',
            root: 'sites'
        }
    },
    storeId: 'SitesStore',
    root: 'sites'
});

Thanks everyone. Couldn't believe how hard this was. Mainly because I couldn't find a good tutorial. lol

Answer 1

UPDATE

I was able to figure this out. Here is the working code:

var SitesStore = Ext.create('Ext.data.Store', {
     autoLoad: true,
     fields: ['id','name'],
     proxy: {
        type: 'ajax',
        url: '/sites/getsites.do',
        reader: {
           type:'json',
           root: 'sites'
        }
     },
     storeId: 'SitesStore',
     root: 'sites'
  });

  Ext.create('Ext.form.ComboBox', {
     fieldLabel: 'Choose Site...',
     store: SitesStore,
     queryMode: 'remote',
     displayField: 'name',
     triggerAction: 'all',
     valueField: 'id',
     renderTo: "timesheetSearch"
  });

I never could get JSONStore to work so I created a standard Store and had to match the reader attribute with my JSON data.

Hope this helps someone.

Answer 2

That's a bit dirty and my first ExtJS4 lines (I am used to v2.x/3.x) but it should work. As I see you use a browser with console so you will be able to debug if there are some errors. Also you should take a look at the API

 var SitesStore = new Ext.data.JsonStore({
    autoLoad: true,
    fields: [{
       name: 'id',
       mapping: 'id'
    }, {
       name: 'name',
       mapping: 'name'
    }],
    proxy: {
       type: 'ajax',
       url : '/sites/getsites.do'
    },
    storeId: 'SitesStore',
    root: 'sites',
    url: '/sites/getsites.do'
    // ,xtype: 'jsonstore'
 });

  Ext.onReady(function(){
     Ext.QuickTips.init();


    Ext.create('Ext.form.ComboBox', {
       fieldLabel: 'Choose Site...',
       store: SitesStore,
       // data: data[0].raw["sites"],
       queryMode: 'remote',
       displayField: 'name',
       valueField: 'id',
       renderTo: "timesheetSearch",
       listeners:{
            scope: this,
            'select': function(field, value){
                console.log(value);
            }
        }

    });
  });