22
votes

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?

1

1 Answers

23
votes

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.