PDA

View Full Version : Typeahead feature in Ext.ux.form.MultiSelect



jvarma80
5 Sep 2014, 1:13 PM
Hello Everyone,
I am using Extjs 4 and I am using Ext.ux.form.MultiSelect at multiple places in my application. Everything is working fine except that it doesn't support Typeahead feature. This typeahead works fine when I am using comboboxes but in case of multi-select it is not working. Is Typeahead not supported by Ext.ux.form.MultiSelect or is there any workaround for this?.
Thanks....

jvarma80
8 Sep 2014, 1:41 PM
What I want is, say there are 3 values in the list, Ant, Bat,Cat and I select the first value. Now when I type the lettter 'c' the contrl should automatically go to the value 'Cat'. Is this possible with the Multiselect?.

Any suggestions?..

slemmon
8 Sep 2014, 9:56 PM
Are you talking about Multiselect like in the following example?
http://dev.sencha.com/ext/5.0.1/examples/multiselect/multiselect-demo.html

If so, where are you typing where you're looking for typeAhead? Did you also add a textfield?

jvarma80
9 Sep 2014, 6:44 AM
Yes, That is the Multiselect I am dealing with.
http://dev.sencha.com/ext/5.0.1/exam...lect-demo.html (http://dev.sencha.com/ext/5.0.1/examples/multiselect/multiselect-demo.html)

Here in the first example, say I selected the value One. Then if I type something like 'F', then it should automatically show the options that start with F only(Four,Five..). I haven't added a textfield. I am just trying to key-in the charaters in the multiselect box. SO should I be adding a text field for this purpose?.

slemmon
9 Sep 2014, 11:55 AM
You don't have to - depends on how you intend for users to interact with the component.
Ultimately you'll want to fetch a reference to the multiSelect's store and use the filter() and clearFilter() methods to filter the results. With a field you can set a change (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.form.field.Text-event-change) listener to monitor the change on the field and apply its value to the multiSelect's store's filter (or clearFilter if the value is empty).

If you don't want a textfield / triggerfield devoted to filtering you'll need to set keypress listeners on the el (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.ux.form.MultiSelect-method-getEl) of the component and filter by key inputs. You might give some thought as to how you'll have the user clear the filter or see what they've filtered by in the event of a typo (which is probably the argument for having a textfield / triggerfield for filtering).