Unable to Save values of a multifield's pathFields that I have added in a custom composite field.

I have a MAIN MultiField which has a fieldConfig xtype as mywidgetjsname.

In mywidget.js, I have built a CustomMultiFied which extends CQ.form.CompositeField.

In this, I have a hiddenField, a textField and a MultiField(so this is a multiField inside the MAIN multifield).

I have seen many examples over blogs and else where where in the value of the whole customfield is saved in the Hidden Field.

This done using --> this.hiddenField.setValue(this.getValue());

getValue calls getRawValue()....

inside getRawValue() you basically you return this.Field1.getValue() + "|" (some separator) + this.Field2.getValue() + "|" + Field3.getValue() + .....and so on.

The values eventually get saved in the Property = name in the etc/designs/appName/componentName/

Theres another method used in the widget.js for setting the values. This is generally like  below:

setValue: function (value) {
        var parts = value.split("|"); ---> split based on the separator
         this.Field1.setValue(parts[0]);

         this.Field2.setValue(parts[1]);

         this.Field3.setValue(parts[2]); ........... and so on....

          this.hiddenField.setValue(value);
    }

Now comes my issue.....In my field-set unlike above, I have a multiple field-set i.e. a MultiField...

On saving values in a desired pattern in the Property = name in the etc/designs/appName/componentName/ i am able to fetch and display values into my Multifield in my widget.

See below my getRawValue function below:

getRawValue: function () {
           var txtFld =  this.nameField.getValue() + "|";        ---> Here i am saving my TextField

        var arr = new Array();
        arr = this.NestedMultiField.getValue();            ---> NestedMultiField is my multified inside my widget
        var valuesString = '';
        for (var i=0; i<arr.length ; i++ )
        {
            if(i < arr.length-1)
                valuesString += arr[i] + "##";
            else
                valuesString += arr[i];
        }

        var finalReturnVal = txtFld + valuesString;
        return finalReturnVal;
    }

on execution of the last line of the getRawValue function {return finalReturnVal;} my values like this "TextFieldValue|MultiFldVal1##MultiFldVal2##MultiFldVal3...." should go and get saved in my property {}............ THIS IS NOT HAPPENING....

When I myself manually save values in a desired pattern in the Property = name in the etc/designs/appName/componentName/ i am able to fetch and display values into my Multifield in my widget. That works because of the below setValue function:

setValue: function (value) {
        var parts = value.split("|");
         this.nameField.setValue(parts[0]);

         var childLinks = parts[1].split("##");
        this.NestedMultiField.setValue(childLinks);

        this.hiddenField.setValue(value);
    }

My widget's multifield's values get perfectly populated as the above function works perfectly......

BUT I AM NOT ABLE TO SAVE VALUES from the dialog. After end of everything only TextField's value gets saved in the property in etc/designs/appName/ComponentName.

This is my first post. Sorry if it is too long. Sorry if it doesnt explain much. Sorry if it explains TOO much..

Thanks in advance.