Extjs 4.0 Combo box for a remote query not displaying. The Drop down values show blank description

Question

I am trying to upgrade from Extjs 3.4 to Extjs 4.0

initComponent: function() {
  this.items = [{
           xtype: 'fieldset',
           width: 600,
           bodyPadding: 40,
           title: 'Dates',
           items: [{
             xtype: 'datefield',
             anchor: '100%',
             fieldLabel: 'From',
             name: 'from_date',
             format: 'm d Y',
             value: '02 04 1978'
           }, {
             xtype: 'datefield',
             anchor: '100%',
             fieldLabel: 'To',
             name: 'to_date',
             format: 'm d Y',
             altFormats: 'm,d,Y|m.d.Y',
             value: '02.04.1978'
           },{
                    xtype: 'combobox',
                    hiddenName: 'status',
                    fieldLabel: 'Status',
                    store: autoCompleteStore,
                    queryMode: 'remote',
                    forceSelection:'true',
                    triggerAction:'all',
                    displayField:'displayField',
                    fireEventOnSetValue: false,
                    valueField:'valueField',
                    emptyText:'Select one'
              }]
         }]

}

Ext.define("test.Tickler",{
  extend: 'Ext.data.Model',
  fields: [
    {name: 'f_uid', type: 'string'},
    {name: 'f_description', type: 'string'},
    {name: 'f_value', type: 'string'},
    {name: 'f_visible', type: 'string'},
    {name: 'f_order', type: 'string'},
    {name: 'f_default', type: 'string'},
   ]
  });

var autoCompleteStore = new Ext.data.JsonStore({
   model: "test.Tickler",
   proxy:{
    type: 'ajax',
    url: '../medit_2_public/fc.php?_C_A=TicklerReport.getListOfTicklerReasons',
    reader: new Ext.data.JsonReader({
       type: 'json',
       root: 'results.rows',
       metaProperty: 'metaData'
     })
    }
   }

 });

Here is my output from metadata: [,…] 0: {f_uid: "1", f_description: "Needs Form", f_value: "1", f_visible: "Y", f_order: "1", f_default: "N"} 1: {f_uid: "3", f_description: "Call Client", f_value: "2", f_visible: "Y", f_order: "2", f_default: "N"}

When my screen renders I do see Select One in the value of the drop down for Status. When I select the Drop down I do see the loading warning and I see couple blanks after it loads.

Answer 1

In you combobox definition you have to set which fields from your data should be used in the combobox as value and display field. Currently you have set field names that do not exist in your model. For example setup like this:

valueField: 'f_value',
displayField: 'f_description'