ExtJs表单提交,其中包含对象的数组列表

时间:2013-07-31 16:18:24

标签: java json spring-mvc extjs4 jackson

这是我的表格

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 < 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);
            }
        });

});

这是我的spring 3控制器方法,用extform

进行映射
 @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<Address> adre = ca.getAddress();
            for(int i=0;i<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";
        }

    }

我需要知道如何使用我在上面提到的这种形式映射该数组 这是我的DTO类“CustomerAddress”。我需要知道如何使用spring reqest映射该extForm。这样我就可以逐个访问列表中的属性。

public class CustomerAddress{

private Customer customer;
private List<Address> address;

public CustomerAddress() {

}   
public Customer getCustomer() {
    return customer;
}    
public void setCustomer(Customer customer) {
    this.customer = customer;
}  
public List<Address> getAddress() {
    return address;
}
public void setAddress(List<Address> address) {
    this.address = address;
}    

}

我认为问题出在我为地址填写的“名称”或“id”字段中。

0 个答案:

没有答案