JSFiddle - React, Tailwind, and code Playground

by Johan Vandeplas

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css">
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-debug.js"></script>

CSS

.x-boxselect.x-form-text {
    height: auto;
    cursor: text;
    padding: 0;
    overflow-y: auto;
}
.x-boxselect ul.x-boxselect-list {
    padding: 1px 3px;
}
ul.x-boxselect-list.x-boxselect-singleselect {
    white-space: nowrap;
    overflow: hidden;
}
.x-boxselect input {
    border: none;
    background: none;
    line-height: 18px;
    height: 20px;
    width: 100%;
}
.x-boxselect-input, .x-boxselect-item {
    display: inline-block;
    position: relative;
    *display:inline; /* IE7 */
    zoom:1; /* IE */
}
.x-boxselect-stacked .x-boxselect-item {
    display: block;
}
.x-boxselect-item {
    -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; o-border-radius: 6px; khtml-border-radius: 6px; border: 1px solid #CAD8F3;
    padding: 0px 1px 0px 5px !important;
    margin: 1px 1px 1px 0;
    background-color: #DEE7F8;
    cursor: default;
}
.x-field:not(.x-item-disabled) .x-boxselect-item:hover {
    background: #BBCEF1;
    border: 1px solid #6D95E0;
}
.x-field:not(.x-item-disabled) .x-boxselect-item.selected {
    border: 1px solid #316AD3 !important;
    background: #658FDC !important;
}
.x-boxselect-item-text {
    line-height: 16px;
    padding-right: 20px !important;
}
.x-boxselect-item-close {
    cursor: pointer;
}
.x-boxselect-hideselections .x-boundlist-selected {
    display: none;
}

JavaScript

/**
 * BoxSelect for ExtJS 4.1, a combo box improved for multiple value querying, selection and management.
 *
 * A friendlier combo box for multiple selections that creates easily individually
 * removable labels for each selection, as seen on facebook and other sites. Querying
 * and type-ahead support are also improved for multiple selections.
 *
 * Options and usage mostly remain consistent with the standard
 * [ComboBox](http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox) control.
 * Some default configuration options have changed, but most should still work properly
 * if overridden unless otherwise noted.
 *
 * Please note, this component does not support versions of ExtJS earlier than 4.1.
 *
 * Inspired by the [SuperBoxSelect component for ExtJS 3](http://technomedia.co.uk/SuperBoxSelect/examples3.html),
 * which in turn was inspired by the [BoxSelect component for ExtJS 2](http://efattal.fr/en/extjs/extuxboxselect/).
 *
 * Various contributions and suggestions made by many members of the ExtJS community which can be seen
 * in the [official user extension forum post](http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect).
 *
 * Many thanks go out to all of those who have contributed, this extension would not be
 * possible without your help.
 *
 * See [AUTHORS.txt](../AUTHORS.TXT) for a list of major contributors
 *
 * @author kvee_iv http://www.sencha.com/forum/member.php?29437-kveeiv
 * @version 2.0.3
 * @requires BoxSelect.css
 * @xtype boxselect
 *
 */
Ext.define('Ext.ux.form.field.BoxSelect', {
    extend:'Ext.form.field.ComboBox',
    alias: ['widget.comboboxselect', 'widget.boxselect'],
    requires: ['Ext.selection.Model', 'Ext.data.Store'],

    //
    // Begin configuration options related to selected values
    //

    /**
     * @cfg {Boolean}
     * If set to `true`, allows the combo field to hold more than one value at a time, and allows selecting multiple
     * items from the dropdown list. The...