This chapter introduces some of the very useful and popular plugins and extensions available in the Ext JS library.
In this chapter we will cover:
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.