I have an ExtJS4 application that I've built for the accounting department internally. On one of the pages I have a few comboboxes that need filled in. I have set the two comboboxes up like this:
The top combobox works fine, it lets a user type in the box and auto-completes their entry, it does not currently actually filter the store, it's auto-complete only. If you click the dropdown arrow you can select from any of the six items in the list as well.
The issue is with the second combobox. You can type and auto-complete in the box all day long but after typing and selecting the one you want if you try and click the dropdown arrow it will never drop down. If you doubleclick it will flash for a moment but then quickly disappear. To fix that if you remove the lastQuery: '' property on the configuration of the combobox and remove the beforequery listener that deletes the lastQuery the dropdown box will always display for you but you run into a new issue.
After removing the listener and config option after you click the dropdown arrow and select an item, clicking the arrow again causes the list to display but with the "Loading.." always showing and you can't select any items. Once this happens you can not select anything until you refresh the page (or open the JS console and do a store.load() on that store or set lastQuery = null on the combobox).
Why is this behaving differently than the other combobox? The stores are both identical behind the scenes in regard to the way they return their items. The only difference in the stores is that one loads the combobox with 6 items and the second loads the other combobox with 530 items.
I've record a small screencast illustrating the issue. You can see the difficulty in the dropdown menu working, in certain situations it's impossible to activate.