BoxSelect should support all configuration values as the ComboBox supports. There are some changes for the default values for this extension:

Now, let us start using the BoxSelect extension with the following configuration:

{
  "value": [
    "TX",
    "CA"
  ],
  "fieldLabel": "Select multiple states",
  "displayField": "name",
  "valueField": "abbr",
  "width": 500,
  "labelWidth": 130,
  "emptyText": "Pick a state, any state",
  "store": "States",
  "queryMode": "local"
}

And the screenshot should be as follows:

In the preceding screenshot, we can see how easily we can select multiple values within the BoxSelect combobox extension.

We can easily configure the display of the selected values and the drop-down list items through templates:

Now, let us see how we can set the configuration for customizing the labelTpl and the listConfig options:

{
  "delimiter": ", ",
  "value": "AZ, CA, NC",
  "labelTpl": "<img src="{flagUrl}"style="height: 25px;vertical-align: middle;margin: 2px;" /> {name} ({abbr})",
  "listConfig": {
    "tpl": [
      "<ul><tpl for=".">",
      "<li role="option"class="x-boundlist-item"style="background-image:url({flagUrl});background-repeat: no-repeat;background-size: 25px;padding-left: 30px;">{name}: {slogan}</li>",
         "</tpl></ul>"
    ]
  },
  "fieldLabel": "Select multiple states",
  "displayField": "name",
  "valueField": "abbr",
  "width": 500,
  "labelWidth": 130,

  "store": "States",
  "queryMode": "local"
}

Following is the screenshot of the BoxSelect extension using the preceding configuration for labelTpl and listConfig:

In the preceding screenshot, we can see that the BoxSelect extension is working fine and is showing the selected items with the configured labelTpl and listConfig comboboxes.

The BoxSelect extension is targeted for multiple selections, but it also supports single selection by setting the multiSelect option to false. If we need the single selection option by default, we can add the following line of code before the BoxSelect extension is created:

Ext.ux.form.field.BoxSelect.prototype.multiSelect = false;

Now, let us configure the BoxSelect extension for a single selection:

{
  "fieldLabel": "Select a state",
  "multiSelect": false,
  "filterPickList": true,
  "displayField": "name",
  "valueField": "abbr",
  "width": 500,
  "labelWidth": 130,
  "emptyText": "Pick a state, any state",
  "store": "States",
  "queryMode": "local"
}

And the output should be as follows:

In the preceding screenshot, we can now select only a single value within the combobox when the multiSelect option is set to false.

When we set the queryMode option to remote and the forceSelection option to true, and we pass a value to the BoxSelect extension that is not in the store, a query will be sent to the store's configured proxy "x" with the name of the valueField option and a set of unknown values separated by the configured delimiter as the parameters. For example, if the valueField option is abbr, the delimiter value is |, and unknown values 'NC', 'VA', and, 'ZZ' are set, the following parameters will be passed to the store's configured proxy:

{ abbr: 'NC|VA|ZZ' }

This attempt to load the unknown values will be performed only once per initValue/setValue call. The records which are still unknown after this request will be removed from the field's value, but all known values will be retained. In the preceding example, the 'ZZ' entry was discarded.

Now, let us configure the BoxSelect extension for remote stores:

{
  "fieldLabel": "With Remote Store",
  "store": "RemoteStates",
  "pageSize": 25,
  "queryMode": "remote",
  "delimiter": "|",
  "value": "NC|VA|ZZ",
  "triggerOnClick": false,
  "labelTpl": "{name} ({abbr})",
  "listConfig": {
    "tpl": [
      "<ul><tpl for=".">",
        "<li role="option"class="x-boundlist-item">{name}: {slogan}</li>",
      "</tpl></ul>"
    ]
  },
  "displayField": "name",
  "valueField": "abbr",
  "width": 500,
  "labelWidth": 130
}

Following is the screenshot where we have used this configuration for the BoxSelect extension:

In the preceding screenshot we can see that our configured BoxSelect is working fine for the remote store, and the value for 'NC' and 'VA' is retrieved where the value for 'ZZ' is discarded.

In this example we will show the use of forceSelection, when set to false, to enable the entry of new values with autosuggestion provided from the attached store. The new records will be created using the user input for both the configured displayField and valueField. These new records are not added to the ComboBox store automatically.

New entries can be created by any of the following four ways:

Now, let us configure the BoxSelect extension for autosuggestion:

{
  "fieldLabel": "Enter multiple email addresses",
  "width": 500,
  "growMin": 75,
  "growMax": 120,
  "labelWidth": 130,
  "store": [
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]"
  ],
  "queryMode": "local",
  "forceSelection": false,
  "createNewOnEnter": true,
  "createNewOnBlur": true,
  "filterPickList": true,
  "displayField": "name",
  "valueField": "abbr"
}

Using this configuration we will get the BoxSelect component as follows:

In the preceding screenshot, we can see how the BoxSelect component is offering an autosuggestion list where we can select those list items or create new records.

The following configuration options are specific to the BoxSelect extension:

Now, let us configure the BoxSelect component by changing some of the default values to see the effect:

{
  "fieldLabel": "Select multiple states",
  "displayField": "name",
  "width": 500,
  "labelWidth": 130,
  "store": "States",
  "queryMode": "local",
  "valueField": "abbr",
  "value": "WA, TX",
  "stacked": true,
  "pinList": false,
  "filterPickList": true
}

Following is the screenshot of the BoxSelect component where we've used this configuration:

In the preceding screenshot, we can see that the labeled items are filling the full width available as we set the stacked option to true. The pick list is automatically collapsing as soon as a selection is made as we set the pinList option to false, and the current selected values are hidden from the expanded pick list as we set the filterPickList option to true.

The following methods are available within BoxSelect, which helps to work with the value of the combobox:

Also the BoxSelect component provides the following two events for managing the selected items: