Why is my EXTJS Combobox displaying small list items?

  • JavaScript
  • Thread starter iamjon.smith
  • Start date
  • Tags
    Javascript
In summary, the combobox has a problem displaying the list of stations when the user tries to select one. The problem was fixed by changing the line where the store was inserted to insert an object instead of a string.
  • #1
iamjon.smith
117
3
I am creating the following combobox:
Code:
//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:

Code:
 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');
              },

Code:
// 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...

upload_2016-2-9_16-41-52.png
 
Technology news on Phys.org
  • #3
I figured out what the problem was, so in case someone else runs across this post, here is the fix...
JavaScript:
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.
 
  • Like
Likes Borg and jedishrfu
  • #4
THanks for posting your solution too! So many times threads are left dangling without answers.
 
  • Like
Likes Borg

Related to Why is my EXTJS Combobox displaying small list items?

1. How do I set a default value for a combobox in EXTJS?

The default value for a combobox in EXTJS can be set by using the value config option. Simply pass in the desired default value as a string or an array of strings.

2. Why is my combobox not displaying any data?

There are a few potential reasons for a combobox to not display any data. First, make sure that the store for the combobox is properly configured and loaded with data. Additionally, check that the displayField and valueField configs are set to the correct fields in the store. Finally, ensure that the combobox is properly bound to the store by using the store config.

3. How do I filter the options in a combobox in EXTJS?

To filter the options in a combobox, you can use the queryMode config. Set this to 'local' and the combobox will filter its options based on the current user input. You can also use the filterPickList config to control whether the filtering is case-sensitive or not.

4. Can I customize the appearance of the combobox dropdown options?

Yes, you can customize the appearance of the combobox dropdown options by using the listConfig config. This allows you to specify a custom template, styling, and other configurations for the dropdown options.

5. How do I add additional functionality to a combobox in EXTJS?

To add additional functionality to a combobox, you can use the listeners config to listen for events such as select or change. You can also add custom plugins to the combobox to extend its functionality. Additionally, you can use the bind config to bind the combobox to a viewmodel and add custom logic through the viewmodel's data and formulas.

Similar threads

  • Programming and Computer Science
Replies
10
Views
418
  • Programming and Computer Science
Replies
5
Views
2K
  • Programming and Computer Science
Replies
2
Views
5K
  • Programming and Computer Science
Replies
9
Views
1K
  • Programming and Computer Science
Replies
9
Views
3K
  • Programming and Computer Science
Replies
1
Views
3K
  • Programming and Computer Science
3
Replies
75
Views
4K
  • Engineering and Comp Sci Homework Help
Replies
4
Views
3K
  • MATLAB, Maple, Mathematica, LaTeX
Replies
3
Views
2K
  • Engineering and Comp Sci Homework Help
Replies
4
Views
3K
Back
Top