PDA

View Full Version : how to update record use RowEditing



a6985600
8 Oct 2012, 12:32 AM
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);
});
});
once I change some record and click the button "save all the records" then 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=1349684829963"
the backend just simple 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.");
}
}

I cannot save the record, who can help me?

scottmartin
9 Oct 2012, 5:30 AM
What do you get when you enter the URL in the browser? Do you get 400 error?

Scott.

a6985600
9 Oct 2012, 5:16 PM
i got 400 error,I use chrome to get the error. store.update(); get the error.

scottmartin
10 Oct 2012, 4:20 AM
By using the URL, we narrowed it down to the server. You will need to find out why.

Scott.

a6985600
10 Oct 2012, 5:34 PM
POST http://localhost:8080/sample/person/update.htm?_dc=1349918576645 400 (Bad Request) ext-all.js:38 (http://localhost:8080/sample/ext-4.1.1a/ext-all.js)

Ext.define.requestext-all.js:38 (http://localhost:8080/sample/ext-4.1.1a/ext-all.js)
Ext.define.doRequestext-all.js:38 (http://localhost:8080/sample/ext-4.1.1a/ext-all.js)
Ext.define.updateext-all.js:38 (http://localhost:8080/sample/ext-4.1.1a/ext-all.js)
Ext.define.updateext-all.js:38 (http://localhost:8080/sample/ext-4.1.1a/ext-all.js)
Ext.create.tbar.handlersimpleReader.js:60 (http://localhost:8080/sample/js/simpleReader.js)
Ext.define.fireHandlerext-all.js:38 (http://localhost:8080/sample/ext-4.1.1a/ext-all.js)
Ext.define.onClickext-all.js:38 (http://localhost:8080/sample/ext-4.1.1a/ext-all.js)
(anonymous function)
g


in the function store.update();catch the error.39279