title: AEM CQ5 - Multifield custom xtype inside a mutlifield custom xtype
body: <p>I am trying to create a component in AEM CQ5 which will generate a quiz module. My requirement is to create a dialog which will allow me to create multiple questions each with multiple answers. My dialog xml is as follows - </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
      jcr:primaryType="cq:Dialog"
      xtype="dialog"&gt;
      &lt;items jcr:primaryType="cq:Widget"
          xtype="tabpanel"&gt;
          &lt;items jcr:primaryType="cq:WidgetCollection"&gt;
              &lt;categories 
                  jcr:primaryType="cq:Panel"
                  title="Questions &amp; Answers"&gt;
                  &lt;items jcr:primaryType="cq:WidgetCollection"&gt;
                      &lt;questions-answers
                          jcr:primaryType="cq:Widget"
                          title="Questions &amp; Answers"
                          name="./qasegment"
                          xtype="dialogfieldset"&gt;
                              &lt;items jcr:primaryType="cq:WidgetCollection"&gt;
                                  &lt;link
                                      jcr:primaryType="cq:Widget"
                                      fieldDescription="Click on Add item to add questions. Once question is added, click on Edit Answers to add answers and the destination URLs"
                                      name="./questionsAnswers"
                                      typeHint="String"
                                      xtype="multifield"&gt;                         
                                      &lt;fieldConfig 
                                          jcr:primaryType="nt:unstructured"
                                          xtype="widgets.configurableQandAfield"/&gt;
                                  &lt;/link&gt;
                              &lt;/items&gt;
                      &lt;/questions-answers&gt;
                  &lt;/items&gt;       
              &lt;/categories&gt;
          &lt;/items&gt;
      &lt;/items&gt;
  &lt;/jcr:root&gt;
  </code></pre>
  
  <p>From and xtype:mutlifield, I am referring to a custom extjs widget which is as follows. This will create the  (question + question configurations + Add answer multifield ) multifield.</p>
  
  <pre><code>NirmalWeb.ConfigurableQandAField = CQ.Ext.extend(CQ.form.CompositeField, {
  
       /**
       * @private
       * @type CQ.Ext.form.HiddenField
       */
      hiddenField: null,
  
      /**
       * @private
       * @type CQ.Ext.form.TextField
       */
      questionField: null,
  
      /**
       * @private
       * @type CQ.Ext.form.TextField
       */
      linkField: null,
  
      textField:null,
  
      answerOptions:null,
  
      answerType:null,
  
      widgetConfig: null,
  
  
      constructor: function(config) {
          config = config || { };
          var defaults = {
              "border": true,
              "layout": "form",
              "labelSeparator": ":",
              "padding": "10px"
          };
          this.widgetConfig = config;
          config = CQ.Util.applyDefaults(config, defaults);
          EeWeb.ConfigurableQandAField.superclass.constructor.call(this, config);
      },
  
      // overriding CQ.Ext.Component#initComponent
      initComponent: function() {
          EeWeb.ConfigurableQandAField.superclass.initComponent.call(this);
  
          // Add a hidden field to hold our result to store.
          this.hiddenField = new CQ.Ext.form.Hidden({
              name: this.name
          });
          this.add(this.hiddenField);
  
  
          // Add the link text field and label.
          this.questionField = new CQ.Ext.form.TextField({
              fieldLabel: 'Question',
              allowBlank: false,
              emptyText: "Enter the question",
              width: 500,
              listeners: {
                  change: {
                      fn:this.updateQuestionStore
                  },       
                  dialogclose: {
                      scope: this,
                      fn: this.updateHidden
                  }
              }
          });
          this.add(this.questionField);
  
          var fieldsetConfig = CQ.Ext.apply({}, {
             xtype: 'fieldset',
             title: 'Edit Answer',
             // title or checkboxToggle creates fieldset header
             columnWidth: 0.5,
             checkboxToggle: true,
             collapsed: true,
             items :[
                 {    
                  xtype: "fieldset",
                  title: 'Answer configurations',
                  autoHeight:true,
                  items: [
                          new CQ.Ext.form.RadioGroup({
                                  vertical: false,
                                  id:"answerType",
                                  items: [
                                      {boxLabel: 'Text Answer', name: 'answerType', inputValue: 1, checked:true},
                                      {boxLabel: 'Image Answer', name: 'answerType', inputValue: 2}
                                  ]    
  
                          }),
                          new CQ.Ext.form.RadioGroup({
                                  vertical: false,
                                  id:"answerOptions",
                                  items: [
                                      {boxLabel: 'Single Answer', name: 'answerOptions', inputValue: 1, checked:true},
                                      {boxLabel: 'Multiple Answer', name: 'answerOptions', inputValue: 2}
                                  ]    
  
                          }),
                         ]
                  },
                  {
                  xtype: "multifield",
                      fieldConfig : {
                          items: [
                              {
                                  xtype: "widgets.configurablemultiAnswerfield",
                                  hideLabel: true,
                              }
                          ]
                      }
                  },
             ]
          });
          this.textField = new CQ.Ext.form.FieldSet(fieldsetConfig);
          this.add(this.textField);
  
      },
  
      // overriding CQ.form.CompositeField#processInit
      processInit: function (path, record) { 
          this.linkTextField.processInit(path, record);
          this.linkField.processInit(path, record);
      },
  
      // overriding CQ.form.CompositeField#setValue
      setValue: function(value) {
          var link = JSON.parse(value);
          this.linkTextField.setValue(link.text);
          this.linkField.show();
          this.hiddenField.setValue(value);
      },
  
      // overriding CQ.form.CompositeField#getValue
      getValue: function() {
          return this.getRawValue();
      },
  
      // overriding CQ.form.CompositeField#getRawValue
      getRawValue: function() {
          return JSON.stringify("test");
      },
  
      // private
      updateHidden: function() {
          this.hiddenField.setValue(this.getValue());
      },
  
      editAnswer: function(value) {
                  alert("radio group change");
       }
  
  });
  
  // Register our new xtype.
  CQ.Ext.reg('widgets.configurableQandAfield', NirmalWeb.ConfigurableQandAField);
  </code></pre>
  
  <p>In the custom widget, I am creating another multifield for adding answer text and tool tip which is another custom widget. Unfortunately, the multifield Add item just adds a text field instead of all the fields in the custom widget 'configurablemultiAnswerfield'. </p>
  
  <p>Please help me out. Let me know if anything more is required. Thanks in advance.</p>