Add limit to the number of elements in Multifield in Dialog

At many times clients come up with the requirement of having limits on the number of items which can be added to the multifield.Since the Extjs library doesn't provide support for applying the limit to the multifield.We will implement the functionality with the help of listeners

Objective:

To create a basic multifield of item type textfield and apply limit to the number of items which can be added to it.We will achieve the requirement by removing the Add item button once the number of items reaches the specified limit.This seems to be an appropriate way to provide the functionality rather giving any message or notification.

Prerequisite:

User should know how to create basic cq components.

Steps:

Step 1:
Let's create a basic multifield xtype node by creating a node of type and node name as list with following properties

• name (string): ./list
• xtype (string): multifield

Step 2:
create a fieldConfig node under the node created in step 1 with node name fieldConfig and type nt:unstructured with the following properties

• xtype (string): textfield
• limit (long): 3 

Above property will be used to configure the max number of items

Step 3:
create a listener node under the node created in step 1 with node name listeners and type nt:unstructured with the following properties

• removeditem (string): 

         function(list) {

      var length = list.items.length;

        if (length <= list.fieldConfig.limit) {

          list.items.items[length - 1].show();

        }

    }

• beforeadd (string): 

    function(list, component, index) {

      var length = list.items.length;

      var addButton = list.items.items[length - 1];

      if (length == list.fieldConfig.limit) {

        addButton.hide();

      }

    }

After completing the above steps the nodes will look like this.






Note: The limit can be configured by just changing the limit in the fieldConfig node

Output.

Lets open the dialog and add items by clicking on Add item button


The Add item button appears with two items as we have not reached to the limit.


The Add item button disappears as the limit has reached


Stay tuned, we will update the post with the functionality for applying minimum limit.
Feel free to provide any suggestions.