Wednesday, October 1, 2014

Posting list of json objects from Extjs to Spring MVC

Posting list of json objects from Extjs to Spring MVC by using extjs editable grid




    var premedCompletedCourseworkGrid = new Ext.extend(
            Ext.grid.EditorGridPanel,
            {
                // plugins: [editor],
                stripeRows : true,
                columnLines : true,
                enableHdMenu : false,
                autoHeight : false,
                disableSelection : false,
                width : '100%',               
                clicksToEdit : 1,
                viewConfig : {
                    overflow : 'auto',
                    autoScroll : true

                },

                baseCls : 'user-premed-grid',
                store : premedCompletedCourseworkStore,
                title : "My Premedical Coursework ",
                columns : [ {
                    header : 'Course',
                    width : 240,
                    sortable : true,
                    dataIndex : 'course',
                    renderer : COMMON.renderCourse,                   
                    name : 'course'
                }, {
                    header : 'Lab?',
                    width : 150,
                    sortable : true,
                    dataIndex : 'lab',
                    name : 'lab',
                    align : 'center',
                    renderer : COMMON.renderLabDesc,
                    editor : new Ext.form.ComboBox({
                        typeAhead : true,
                        triggerAction : 'all',
                        transform : 'labExamOption',
                        lazyRender : true,
                        listClass : 'x-combo-list-small'
                    })
                }, {
                    header : 'Unit',
                    width : 150,
                    sortable : true,
                    dataIndex : 'units',
                    name : 'units',
                    renderer : COMMON.renderUnits,
                    align : 'center',
                    editor : new Ext.form.TextField()
                } , {
                    header : 'Unit Type',
                    width : 155,
                    sortable : true,
                    renderer : COMMON.renderUnitTypeDesc,
                    dataIndex : 'unitType',
                    name : 'unitType',
                    align : 'center',
                    editor : new Ext.form.ComboBox({
                        typeAhead : true,
                        triggerAction : 'all',
                        transform : 'unitTypeOption',
                        lazyRender : true,
                        listClass : 'x-combo-list-small'
                    })
                }

                ],
                tbar : [ {
                    xtype : 'common.saveImgButton',    //extjs button     defined below           
                    handler : function() {
                        try {
                                                       
                            var store =  new premedCompletedCourseworkGrid().getStore(); 
                           
                            if (store != null){
                           
                            // give only the modified rows data
                                var changedRecs = store.getModifiedRecords();
                                 var resultStatus = true;
                                 var data = [];
                                if (changedRecs != null && changedRecs.length > 0) {
                                    for ( var i = 0; i < changedRecs.length; i++) {
                                        var wamID = changedRecs[i].data.wamId;
                                        var course = changedRecs[i].data.course;
                                        var units = changedRecs[i].data.units;
                                        var unitType = changedRecs[i].data.unitType;
                                        var lab = changedRecs[i].data.lab;
                                        if (units != null && units >0){
                                             data.push({
                                                 wamId:wamID,
                                                 course:course,
                                                 lab:lab,
                                                 units:units,
                                                 unitType:unitType
                                             });
                                        }                                       
                                    }   

                                    var courseList = {preMedCourseList:data};
                                    // json structure is {"preMedCourseList":[{"wamId":1312,
                                       "course":course,"lab":'asd' ....},{}]}
                                    Ext.Ajax.request({
                                           url:'saveUserPreMedCourseWork1',                                          
                                           method: "POST",                                        
                                           headers: { 'Content-Type': 'application/json;charset=utf-8' },   
                                           jsonData:courseList,
                                           success: function(response, opts) {                                            
                                            try {
                                                //alert('reload');
                                                 premedCompletedCourseworkStore.reload();   
                                               
                                                var return_obj = Ext.decode(response.responseText);
                                                resultStatus = return_obj.success;                                               
                                            } catch (e) {
                                                resultStatus = false;                                               
                                                Ext.MessageBox.alert('Save premed course', "There was a problem
                                                saving pre med course. Please refresh your browser." + e.message);
                                            }                                              
                                        }
                                    }); 
                               
                                } else {
                                    return Ext.MessageBox.alert('Confirm Save',
                                            'Course details not modified');
                                }
                            }
                           
                        } catch (e){
                            return Ext.MessageBox.alert('Confirm Save',
                            'Course details not modified' + e.message);
                        }
                        
                    }
                } ]

            });
           
           
            //save image button
                COMMON.SaveImgButton = Ext.extend(Ext.Button, {
                    text : 'Save',
                    iconCls : 'edit',
                    scale : 'medium'
                });
   
            Ext.reg('common.saveImgButton', COMMON.SaveImgButton);




DTO Classes:



public class UserPreMedCourseList implements Serializable{

    /**
     *
     */
    private static final long serialVersionUID = 7948048144505511239L;
   
    List<UserPremedCourseworkDto>  preMedCourseList;

    public List<UserPremedCourseworkDto> getPreMedCourseList() {
        return preMedCourseList;
    }

    public void setPreMedCourseList(List<UserPremedCourseworkDto> preMedCourseList) {
        this.preMedCourseList = preMedCourseList;
    }
   
}




public class UserPremedCourseworkDto extends PremedCourseworkDto{

    private long wamId;
    private String schoolUnits;
    private String schoolUnitType;
    private String schoolLab;
   
    public long getWamId() {
        return wamId;
    }

    public void setWamId(long wamId) {
        this.wamId = wamId;
    }
   
    public String getSchoolUnitType() {
        return schoolUnitType;
    }

    public void setSchoolUnitType(String schoolUnitType) {
        this.schoolUnitType = schoolUnitType;
    }

    public String getSchoolUnits() {
        return schoolUnits;
    }

    public void setSchoolUnits(String schoolUnits) {
        this.schoolUnits = schoolUnits;
    }

    public String getSchoolLab() {
        return schoolLab;
    }

    public void setSchoolLab(String schoolLab) {
        this.schoolLab = schoolLab;
    }
}

public class PremedCourseworkDto {

    private String course;
    private String required;
    private String recommended;
    private String lab;
    private String unitType;
    private String units;
    private String ap;
    private String online;
    private String comm;
..
}

MVC Controller :



    @RequestMapping(value = "{schoolId}/saveUserPreMedCourseWork1", method = RequestMethod.POST)
    public @ResponseBody
    ExtResponse saveUserPreMedCourseWork1(
            @PathVariable("schoolId") Long schoolId,
            @RequestBody UserPreMedCourseList preMedCourseList ) {
        try {

            List<UserPremedCourseworkDto> courseList = preMedCourseList.getPreMedCourseList();
            for (UserPremedCourseworkDto workDto : courseList) {
                workDto.setWamId(securityService.getCurrentWamId());
           
             ///  business logic goes here

                 }  
               
            }

        } catch (Exception e) {
            Logger.getLogger(SchoolDetailsController.class).error("Error on User pre medical course work details save",e);
            return failure();
        }

        return success();
    }





No comments:

Post a Comment