how to update RowEditing

[a6985600]

hello, i am new to extjs4,i try to use RowEditing to test crud,

Ext.require(['Ext.data.*', 'Ext.grid.*']);

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int',
        useNull: true
    }, 'name', 'age'],
    validations: [{
        type: 'length',
        field: 'name',
        min: 1
    }, {
        type: 'length',
        field: 'last',
        min: 1
    }]
});


Ext.onReady(function(){


    var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'Person',
        proxy: {
            type: 'ajax',
            api: {
                read:  'person/view.htm',
                //create: 'task/bulkCreate.json',
                update: 'person/update.htm'
               // destroy:
            },
            reader: {
                type: 'json',
                root: 'data'
            },
            writer: {
                type: 'json',
                root: 'data'
            },
            
        },
        listeners: {
            write: function(store, operation){
                var record = operation.getRecords()[0],
                    name = Ext.String.capitalize(operation.action),
                    verb;
                    
                    
                if (name == 'Destroy') {
                    record = operation.records[0];
                    verb = 'Destroyed';
                } else {
                    verb = name + 'd';
                }
                Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
                
            }
        }
    });
    
    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1
    });
    
    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: document.body,
        plugins: [rowEditing],
        width: 400,
        height: 300,
        frame: true,
        title: 'Users',
        store: store,
        iconCls: 'icon-user',
        columns: [{
            text: 'ID',
            width: 40,
            sortable: true,
            dataIndex: 'id'
        }, {
            text: 'Name',
            flex: 1,
            sortable: true,
            dataIndex: 'name',
            field: {
                xtype: 'textfield'
            },
        editor: 'textfield'
        }, {
            header: 'Age',
            width: 80,
            sortable: true,
            dataIndex: 'age',
            field: {
                xtype: 'textfield'
            }
        }, {
            text: 'Last',
            width: 80,
            sortable: true,
            dataIndex: 'last',
            field: {
                xtype: 'textfield'
            }
        }],
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Add',
                iconCls: 'icon-add',
                handler: function(){
                    // empty record
                    store.insert(0, new Person());
                    rowEditing.startEdit(0, 0);
                }
            }, '-', {
                itemId: 'delete',
                text: 'Delete',
                iconCls: 'icon-delete',
                disabled: true,
                handler: function(){
                    var selection = grid.getView().getSelectionModel().getSelection()[0];
                    if (selection) {
                        store.remove(selection);
                    }
                }
            },{
                text: 'save all the records',
                iconCls: 'icon-Save',
                handler: function(){
                    // empty record
                    store.update()
                    
                }
            }]
        }]
    });
    grid.getSelectionModel().on('selectionchange', function(selModel, selections){
        grid.down('#delete').setDisabled(selections.length === 0);
    });

});

but once I click the save all record,I catch the exception
Failed to load resource: the server responded with a status of 400 (Bad Request)http://localhost:8080/sample/person/update.htm?_dc=134968482996

the backend is very simple just java crud.

@RequestMapping(value="/person/update.htm")    public @ResponseBody Map<String,? extends Object> update(@RequestParam Object data) throws Exception {
        try{


            List<Person> persons = personService.update(data);


            return getMap(persons);


        } catch (Exception e) {


            return getModelMapError("Error trying to update person.");
        }
    }

[scottmartin]

Duplicate post:
http://www.sencha.com/forum/showthread.php?245274