Ext.ux.form.field.BoxSelect - Intuitive Multi-Select ComboBox

[kveeiv]

BoxSelect for ExtJS 4.1 - Inspired by the infamous SuperBoxSelect for ExtJS 3 and BoxSelect for ExtJS 2

Latest Release: v2.0.3
View examples page: http://kveeiv.github.com/extjs-boxse...boxselect.html
Download current release (2.0.3): https://github.com/downloads/kveeiv/...lect-2.0.3.zip

BoxSelect is a ComboBox extended for more intuitive multiSelect capabilities. Features include:

• Now supports ExtJS 4.1! Unfortunately due to changes in the framework rendering and layout, previous versions are not supported.
• Individually removable labelled items for each selected value
• Customizable item templates, in addition to ComboBox's support of customizable drop list templates
• Keyboard-based selection and navigation of selected values (left/right, shift, ctrl-a, backspace, delete)
• On-demand loading of values from remote stores when an unknown value is set and queryMode = 'remote' and forceSelection = true
• Creation of new value records for forceSelection false
• Configurable pinning of combo pick list for multiSelect = true
• Configurable rendering of labelled items (auto-sized or stacked)
• As BoxSelect extends ComboBox, most (if not all) of the functionality and configuration options of ComboBox should work as expected
• Lots more!

Any contributions of testing, improvements or other constructive feedback are greatly appreciated. I intend to actively maintain the development of this extension through the life of ExtJS 4, and will be able to best do so with the support of the community. Many thanks go out to everyone that has contributed already, and to those that will do so in the future.

Now on github!
Main github project page: https://github.com/kveeiv/extjs-boxselect
To directly collaborate, please fork from the master branch and send pull requests when your proposal is ready. See the github help pages for more information. Contributions are also accepted through this thread or through private message here on these forums.

[Changelog for 2.0.3]
v2.0.3 - 24 Jul 2012
Bug Fixes:
* Resolved field layout issues in complex container layouts
* Resolved destruction order to prevent javascript errors from sometimes occurring
Documentation
* Added button control to examples to show component configurations inline


[Previous Updates]
For a complete historical list of changes for all versions, please see CHANGELOG.txt in the download package.

[zombeerose]

Problems I've encountered thus far:

* If the emptyText is longer than about 20 chars, it gets cut off.
* The emptyText is still displayed even once items are selected.
* Clicking on the X to remove an item generates this error:

store.snapshot is undefined
http://.../Ext.ux.BoxSelect.js
Line 326

[kveeiv]

Thanks zombeerose. I've uploaded a new version with a fix for the following:

* Clicking on the X to remove an item generates this error:

I am headed out for the long weekend, but will address the other issues you mentioned related to emptyText (and sizing of the user input field inside the list container in general) next week.

[JorisA]

Awesome job! Will definitely try and see if I run into bugs!

[kveeiv]

* If the emptyText is longer than about 20 chars, it gets cut off.
* The emptyText is still displayed even once items are selected.

I've uploaded a new version to the main post (0.3) which fixes a variety of issues related to emptyText and also the sizing of the input field within the list element. Thanks for the reports!

[zombeerose]

Thanks for the updates.

[salarmehr]

How can I remove an item from drop-down menu when user select that items?
(as SuperBox do).
Thanks

[JorisA]

I made some modifications to the CSS, only checked with chrome though, if you like it feel free to include them in "the official" release.

Zip: Attachment 26436

Before: (Attachment 26434)


After: (Attachment 26435)

[alicexyl]

How can I remove an item from drop-down menu when user select that items?
(as SuperBox do).
Thanks

Use filterPickList. You can see this work in the demo.

[grgur]

kicks ass