SuperBoxSelect is an extension of the ComboBox component which displays selected items as labelled boxes within the form field. As seen on facebook, hotmail and other sites, it combines both auto-complete and multi-selection capabilities.
The SuperBoxSelect component was inspired by the BoxSelect component found here: http://efattal.fr/en/extjs/extuxboxselect/
This example demonstrates the base functionality of auto-completion and multi-select capabilities. Apart from the displayFieldTpl config, all other functionality is as per the default behaviour.
This example demonstrates the allowNewData config, which allows new data to be added via the addItem and setValueEx methods. New data entered by the user is first sent to a callback function via the newitem event as shown in the source code.
The extraItemCls config property is also used in this example, and enables additional styling of the selected items.
This example demonstrates the stackItems config, which forces the selected items to be rendered stacked.
The per item styling capabilities are demonstrated by the use of the classField and styleField config properties.
This demonstration hides the in-field ‘clear’ and ‘expand’ buttons by setting the renderFieldBtns config to ‘false’
This example demonstrates the navigateItemsWithTab config property set to ‘false’. This prevents the TAB key from focusing the selected items.
The ARROW keys and HOME and END keys can still be used for keyboard navigation between selected items.
This example demonstrates using applyTo to apply the component to an existing dom element.
This example demonstrates using transform on an existing SELECT.