title: ExtJs form Submit which contains array list of objects
body: <p>this is my ext form</p>
  
  <pre><code>Ext.onReady(function() {
  var myFormPanel = Ext
          .create(
          'Ext.form.Panel',
          {
              title: 'Update User',
              labelAlign: 'left',
              labelWidth: 150, // label settings here cascade unless overridden
              url: 'index.jsp',
              frame: true,
              bodyStyle: 'padding:10px 10px 0',
              width: 550,
              renderTo: Ext.getBody(),
              layout: 'anchor', // arrange fieldsets one-by-one
              defaults: {
                  bodyPadding: 4
              },
              items: [
                  {
                      // Fieldset in Column 1 - collapsible via toggle button xtype: 'fieldset',
                      columnWidth: 0.5,
                      title: '1. Personal Details',
                      collapsible: true,
                      defaultType: 'textfield',
                      defaults: {
                          anchor: '100%'
                      },
                      layout: 'anchor',
                      items: [{
                              xtype: 'hiddenfield',
                              name: 'customer.id',
                              id: 'customer.id',
                          },
  
                          {
                              fieldLabel: 'First Name :',
                              labelAlign: 'right',
                              afterLabelTextTpl: required,
                              name: 'customer.firstName',
                              id: 'customer.firstName',
                              labelWidth: 200,
                              allowBlank: false,
                              tooltip: 'Enter your first name'
                          },
                          {
                              fieldLabel: 'Surname :',
                              labelAlign: 'right',
                              afterLabelTextTpl: required,
                              name: 'customer.lastName',
                              id: 'customer.lastName',
                              labelWidth: 200,
                              allowBlank: false,
                              tooltip: 'Enter your surname'
                          }]
                  },
                  {
                      // Fieldset in Column 1 - collapsible via toggle button
                      xtype: 'fieldset',
                      columnWidth: 0.5,
                      title: '2. Address1',
                      collapsible: true,
                      defaultType: 'textfield',
                      defaults: {
                          anchor: '100%'
                      },
                      layout: 'anchor',
                      items: [{
                              fieldLabel: 'Unit Number :',
                              afterLabelTextTpl: required,
                              labelAlign: 'right',
                              name: 'address.add1.unitNumber',
                              id: 'address.add1.unitNumber',
                              labelWidth: 200,
                              allowBlank: false,
                              tooltip: 'Enter the unit number'
                          }
                      ]
                  },
                  {
                      // Fieldset in Column 1 - collapsible via toggle button
                      xtype: 'fieldset',
                      columnWidth: 0.5,
                      title: 'Address2',
                      collapsible: true,
                      checkboxToggle: true,
                      defaultType: 'textfield',
                      defaults: {
                          anchor: '100%'
                      },
                      layout: 'anchor',
                      items: [{
                              fieldLabel: 'Unit Number :',
                              afterLabelTextTpl: required,
                              labelAlign: 'right',
                              name: 'address.add2.unitNumber',
                              id: 'address.add2.unitNumber',
                              labelWidth: 200,
                              allowBlank: false,
                              tooltip: 'Enter the unit number'
                          }]
                  },
              ],
              buttons: [{
                      text: 'Submit',
                      handler: function() {        
                          var form = this.up('form').getForm();
                          if (form.isValid()) {                       
                              form.submit({
                                  url: '/customer/create.action',
                                  success: function(form, action) {
  
                                  },
                                  failure: function(form, action) {
  
                                  }
                              });
                          } else {
                              Ext.Msg.alert('Failed',"Client side validation has been failed");
                          }
                      }
                  }]
  
          });
  
  myFormPanel
          .getForm()
          .load(
          {
              url: '/extjs-crud-grid-spring-hibernate/customer/view.action',
              success: function(form, action) {                   
                  Ext.getCmp('customer.firstName').setValue(action.result.data.customer.firstName);
                  Ext.getCmp('customer.lastName').setValue(action.result.data.customer.lastName);      
  
                  var addressArray = action.result.data.address;
                  for (var i = 0; i &lt; addressArray.length; i++) {
                      var address = addressArray[i];
                      if (address.addressType.id == 1) {
                          Ext.getCmp('address.unitNumber').setValue(addressArray[i].unitNumber);
                      } else {
                          Ext.getCmp('address.unitNumber2').setValue(addressArray[i].unitNumber);
                      }                        
                  }                  
              },
              // params: {
              // consignmentRef: myConsignmentRef
              // },
              failure: function(form, action) {
                  Ext.Msg.alert("Load failed",
                          action.result.errorMessage);
              }
          });
  </code></pre>
  
  <p>});</p>
  
  <p>and this is my spring 3 controller methode which maps with the extform</p>
  
  <pre><code> @RequestMapping(value = "/customer/create.action")
      public @ResponseBody
      String create(CustomerAddress ca)
              throws Exception {
          try {
                  //i can access the customer object from hear  
              System.out.println("Customer :"+ca.getCustomer().getFirstName());
                  //but the form doesnt map with the this array
              List&lt;Address&gt; adre = ca.getAddress();
              for(int i=0;i&lt;adre.size();i++){
                  System.out.println("Address :"+adre.get(i).getUnitNumber());
              }
              //System.out.println(ca.get);
              //customerService.updateCustomer(customer);
              return "Record sucessfully added";
  
          } catch (Exception e) {
              e.printStackTrace();
              return "Failed";
          }
  
      }
  </code></pre>
  
  <p>i need to know how to map that array with this form that i mentioned in the above
  and this is my DTO class "CustomerAddress". i need to know how to map that extForm with spring reqest. so that i can access the attributes in the list one by one.</p>
  
  <pre><code>public class CustomerAddress{
  
  private Customer customer;
  private List&lt;Address&gt; address;
  
  public CustomerAddress() {
  
  }   
  public Customer getCustomer() {
      return customer;
  }    
  public void setCustomer(Customer customer) {
      this.customer = customer;
  }  
  public List&lt;Address&gt; getAddress() {
      return address;
  }
  public void setAddress(List&lt;Address&gt; address) {
      this.address = address;
  }    
  </code></pre>
  
  <p>}</p>
  
  <p>i thinks the problem is in the "name" or in the "id" fields that i have put for the addresses.</p>