The MultiSelect extension

Ext.ux.form.MultiSelect is a form field type which allows the selection of one or more items from a list. A list is populated using a data store. Items can be reordered via the drag-and-drop method, if the ddReorder property of this class is set to true.

Here, in the following code, a form panel class has been defined, in which the MultiSelect extension has been used as an item of this form:

Ext.define('Examples.view.multiselect.MultiSelectFormPanel', {
  extend : 'Ext.form.Panel',
  alias : 'widget.multiselectformpanel',
  requires : ['Ext.ux.form.MultiSelect'],

  constructor : function(config) {

    Ext.apply(this, {
      bodyPadding : 10,
      items : [{
        anchor : '100%',
        xtype : 'multiselect',
        fieldLabel : 'Multi Select',
        name : 'multiselect',
        store : Ext.create('Examples.store.DummyStore'),
        valueField : 'name',
        displayField : 'name',
        ddReorder : true,
        listeners : {
          change : {
            fn : this.getMultiSelectValue
          },
          scope : this
        }
      }]
    });
    this.callParent(arguments);

  },

  getMultiSelectValue : function() {
    var title = "Multiselect values",
    value = this.getForm().findField('multiselect').getValue();
    Ext.Msg.alert(title, value);
  }
});

You can see in the preceding code that the ddReorder option is set to true in order to reorder the items by the drag-and-drop method. And also, by using the getMultiSelectValue function as the change event handler of the multiselect field, a message, with the selected value of the multiselect field, can be displayed.

In the following screenshot, you can see the result of the MultiSelectFormPanel class that we have defined, which is used within a window:

You can see that we can select multiple values, and as soon as we select the items in the list, the selected values of the multiselect field is shown as the message, the selected value of the multiselect field is shown as the message.

The available configuration options, properties, methods, and events for this extension is documented at http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.ux.form.MultiSelect.