Wednesday, March 20, 2013

ExtJS Store Shared Between Multiple ComboBox Controls

Environment: ExtJS 4.1.3, auto loaded store, shared by multiple comboboxes

Problem:
Combobox with auto-complete behaves strangely. Sometimes, the list is obviously filtered down by something else.

Cause:
The same data store instance is shared by multiple combobox on the page. "doQuery" function in the combobox will try to reserve the store's filter that is not created by the combobox itself (see ComboBox.js > clearFilter, and doQuery implementation). This design allows the auto-complete filter of different dropdown pickers to interfere with each other.

Solution:
1. create custom control, then override "doQuery" function to call store.clearFilter()
Pros:
- Clean, reusable design
Cons
- Validation still has cross contamination of conflicting filtering
- In cases you want to preserve an existing filter, this solution need more tweaks or configuration input to make it working

2. Declare store of the combobox using the following style: store: {type: 'myStoreAlias'}, instead of store: 'myStoreName'. This way it will ensure each combobox has their own instance of the store, thus not interfering each other's filtering.
Pros:
- No other hidden surprises lurking around
Cons:
- Pretty much have to abandon the store: 'myStoreName' completely, because in a module design, you just don't know which combobox may live in the same page with another one and using the same store
- Network and memory overhead to maintain multiple copies of the same data

No comments: