PDA

View Full Version : Adding to ComboBox Store without dropdown collapse



Lucy.
12 Oct 2014, 1:16 PM
Hi all,

I'm new to Ext JS, just in case my question doesn't make that crystal clear! There's also a TL;DR at the bottom of the post. ~o)

In a retail app, I'm using ComboBoxes with typeAhead and autoSelect to filter the stock that is displayed on a chart showing sales data by month. The stock is filtered by category and sub-category, and might look something like this if arranged into a folder structure.


Category: All (3)
|-- Books
| \-- All (2)
| \-- Fiction
| |
| |-- All (354)
| |-- Of Mice And Men
| |-- Infinite Jest
| |-- (...)
| \-- Non-fiction
| |
| |-- All (17)
| |-- Surely You're Joking, Mr. Feynman
| |-- Freakonomics
| |-- (...)
|
|
|-- Video Games
| |-- All (2)
| |-- Strategy
| \-- Sports
| |
| |-- All (3)
| |-- Soccer
| |-- Basketball
| |-- Boxing
|
|
|-- Etc


I have an afterrender function to set the value of each category/sub-category ComboBox to All + the number of items in the store of a given category/sub-category. On expand, the 'All (X)' option is added to the store so that users can click back to viewing sales data for all items in the sub-category even if they have previously filtered down to a single item. The option is removed again on collapse?.

The problem comes if a user types in the ComboBox field. 'All (X)' then becomes sorted alphabetically and is no longer at the top of the list. I have tried adding a listener to check the index of 'All (X)' whenever the ComboBox's Picker is refreshed, as below, but this causes the dropdown to collapse and renders typeAhead useless -- the dropdown only appears on mouse click or with the down arrow, rather than by expanding with typeAhead.

bme

Example:

Expanding
50691

After typing
50692



I'd be really grateful if somebody could point me in the right direction of a way to keep 'All' at the top of the dropdown and not subject to sorting along with the rest of the options.

TL;DR
How do I keep an option at the top of a ComboBox's picker while using typeAhead and filters?

slemmon
14 Oct 2014, 2:08 AM
Hi,

Try setting sortOnFilter to false
http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.data.Store-cfg-sortOnFilter

Lucy.
14 Oct 2014, 1:19 PM
Yup, that did it. I thought I'd tried that earlier to no avail -- thanks a lot for the tip!!