title: Why can't I get a simple Combobox to work in EXTjs 4 using a JSONStore?
body: <p>This is driving me insane.  I have a JS file that is:</p>
  
  <pre><code>  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
  </code></pre>
  
  <p>My <code>/sites/getsites.do</code> returns <code>JSON</code> data in the following format:</p>
  
  <pre><code>{
      -sites: [
          -{
              id: "12345678"
              name: "Blah Warehouse"
          },
          -{
              id: "5999B91DF6C0"
              name: "WalMart Warehouse"
          },
          ...
  }
  </code></pre>
  
  <p>I realize the <code>data[0].raw["sites"]</code> 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 <code>sites</code>.</p>
  
  <p>The <code>combobox</code> <strong>DOES</strong> render.  However, the live search doesn't work and there are no entries.</p>
  
  <p>I'm new to ExtJS.</p>
  
  <p>Any tips would be appreciated.</p>
  
  <p>Thanks</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This code <strong>WORKS</strong></p>
  
  <pre><code>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"
  });
  </code></pre>
  
  <p>This does <strong>NOT</strong></p>
  
  <pre><code>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"
  });
  </code></pre>
  
  <p>When I run it without a <code>proxy</code> (and specify a <code>url</code>) I get an error saying I didn't specify a proxy.</p>
  
  <p>Thanks</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>UGH!!!!!!</p>
  
  <p>I got it.  Here is the correct <code>JSONStore</code></p>
  
  <pre><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'
  });
  </code></pre>
  
  <p>Thanks everyone.  Couldn't believe how hard this was.  Mainly because I couldn't find a good tutorial.  lol</p>