1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    7
    Vote Rating
    0
    a6985600 is on a distinguished road

      0  

    Default Unanswered: how to update RowEditing

    Unanswered: how to update RowEditing


    hello, i am new to extjs4,i try to use RowEditing to test crud,
    Code:
    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.
    Code:
    @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.");
            }
        }


  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

Thread Participants: 1