Monday, April 23, 2012

What does ExtJS ComboBox triggerAction: "all” really do?


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?


Source: Tips4all

1 comment:

  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.

    ReplyDelete