ExtJS combobox problem in IE

Question

I have an ExtJS combobox with a remote data store behind it. In all browsers it works fine, except in IE (all versions that I've tested) where the combobox expands for a splitsecond, showing a "loading" icon and then it disappears again. Clicking it again after this doesn't make it expand at all anymore. Basically: it's not being populated.

On the server side, everything is fine. The Controller action is reached (using ASP.NET MVC) which returns Json data. The Json is properly formed (all other browsers swallow it at least).

A weird thing is, that when I put a breakpoint in the Controller action, the JsonStore is properly filled on the client side. This to me indicates some sort of timing problem.

Another weird thing is that, every once in a while, it works fine. Perhaps because the timing is just right by accident or something.

If I set the combobox mode to 'local' and force a .load() on the remote datastore, it works fine in IE too.

This problem is present in all comboboxes that use a remote datastore for us.

I have the following JsonStore:

  var companies = new Ext.data.JsonStore({
    url: '/Company/GetCompanies/',
    root: 'companies',
    fields: [
    { name: 'CompanyID'},
    { name: 'CompanyName'}]
  });

The combobox:

new Ext.form.ComboBox({
 fieldLabel: 'Company',
 typeAhead: false,
 triggerAction: 'all',
 valueField: 'CompanyID',
 hiddenName: 'CompanyID',
 displayField: 'CompanyName',
 mode: 'remote',
 lazyRender: true,
 store: companies,
 allowBlank: true,
 editable: false,
 listeners: {
  'focus': function(){
    if(companies.data.length > 0)
    {
     debugger; // This is only ever fired after the aforementioned breakpoint method.
    }
  }
 }
})

The Json that is returned by the Controller:

{"companies":[{"CompanyID":1,"CompanyName":"Test"},{"CompanyID":2,"CompanyName":"Test1"
},{"CompanyID":3,"CompanyName":"Test2"}]}

Answer 1

Figures, I work out the solution just minutes after posting a question about it.

I switched to a Store instead of a JsonStore and specified the method: 'GET' property of the proxy and it worked. I have no clue why this does work though, and why only IE had a problem with it. My Controller action accepts both GET and POST so that wasn't it.

The Store:

var companies = new Ext.data.Store({
      proxy: new Ext.data.HttpProxy({ url: '/Company/GetCompanies/', method: 'GET' }),
      reader: new Ext.data.JsonReader({ root: 'companies' }, [{ name: 'CompanyID', mapping: 'CompanyID' }, { name: 'CompanyName', mapping: 'CompanyName'}])
});