Why is my EXTJS Combobox displaying small list items?

[iamjon.smith]

I am creating the following combobox:

//stations store
  var stationStore = Ext.create('Ext.data.Store', {
      id: 'stationStore',
      fields:[{name: 'station'}]
  });

the store is build on app load, and is empty to start. At this point the combobox is hidden Once the user runs a search and the ajax call is successful, the returndata is processed and all of the stations are added to the store in the success callback:

 success: function (data) {
                  for (var i = 0; i < data.length; i++) {
                      var store = Ext.StoreMgr.lookup("stationStore");
                      store.insert(i, data[i].stationID);
                  }
                  console.log('success');
              },

// Create the combo box, attached to the stations data store
  var stationCombo = Ext.create('Ext.form.ComboBox', {
      id: 'stationCombo',
      emptyText: 'Choose Station',
      store: stationStore,
      queryMode: 'local',
      displayField: 'station',
      valueField: 'station',
      hidden: true
  });
  tb.add(stationCombo);

The combobox is then displayed and the user is able to select a station from the list. The store has data added into it, and the list is populated, but when you click the dropdown, the list items are so small it looks like a line when you select from the list...

 

[jedishrfu]

Here's some examples of ExtJS combo boxes. Perhaps if you inspect the code and try adjusting the font sizes... you'll get something that's readable.

http://skirtlesden.com/articles/extjs-comboboxes-part-1

and here

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/form/combos.html

 

[iamjon.smith]

I figured out what the problem was, so in case someone else runs across this post, here is the fix...

success: function (data) {                 
   for (var i = 0; i < data.length; i++) {                     
      var store = Ext.StoreMgr.lookup("stationStore");                     
      store.insert(i, {'station' : data[i].stationID});  //<--This line was wrong, the store takes an object, not a string
   }                  console.log('success');             
},

the store takes an OBJECT. I was trying to insert a string, so it was getting the values, but the store couldn't handle just the string. Changing the insert to insert an object instead of a string fixed the problem.

 

[jedishrfu]

THanks for posting your solution too! So many times threads are left dangling without answers.