Question

I tried to create a simple ComboBox:

var combo1 = new Ext.form.ComboBox({
  store: [1,2,3],
  renderTo: document.body
});

But written this way it acts strangely:

• When you first time pop open the dropdown, it offers three choices.
• You choose one.
• But when you after that try to change your selection, the dropdown only offers one choice – the one you previously selected.

I compared my code to the samples on Ext homepage and discovered that adding triggerAction: "all" solves my problem:

var combo2 = new Ext.form.ComboBox({
  triggerAction: "all",
  store: [1,2,3],
  renderTo: document.body
});

ExtJS documentation for triggerAction doesn’t tell me a lot:

The action to execute when the trigger is clicked.
Use ‘all’ to run the query specified by the allQuery
config option (defaults to ‘query’)

I haven’t specified the allQuery option. Actually, I don’t want to perform a query to the server at all.

So what does this triggerAction really do?

And is setting it to "all" really what I should do when I just want a simple static combobox?

Answer 1

After choosing an item, the list is filtered to match the current text value. In your case, it’s always exactly the chosen value, but is more obvious with multi-character values (see the state names example in Ext). If you delete the selected value, the dropdown will go back to having all values. triggerAction:'all' means do not filter, always show all values.