PDA

View Full Version : Deleting Grid's Selected Record in Database



olie
3 Mar 2015, 3:39 PM
I am new to ExtJs and badly need help. I have a grid view with a delete button. I am trying to delete the selected record in the store and in the database as well. Here are my codes:

MileageStore,js


Ext.define('TEST.store.MileageStore', {
extend: 'Ext.data.Store',
requires: 'TEST.model.Mileage',
model: 'TEST.model.Mileage',
proxy: {
method: 'POST',
type: 'ajax',
headers: {
'Content-Type': 'application/json'
},
reader: {
type: 'json',
rootProperty: 'data'
}//,
// api: {
// destroy: localtesting.contextPath+ '/rest/mileage/deleteMileage'
// }

}
});



Mileage.js --> view



Ext.define('TEST.view.mileage.Mileage', {
extend: 'Ext.container.Container',
alias: 'widget.mileage',
requires: [ 'TEST.view.components.mileage.MileageGrid', 'TEST.store.MileageStore',
'TEST.model.Mileage'],
cls: 'jb-summary-grid jb-grid',
minHeight: 100,
margin: "0 0 0 2",
viewConfig: {
emptyText: 'No Data found.'
},
items: [{
xtype: 'button',
itemId: 'deleteSelectedId',
cls: 'jb-yellow-button',
margin: '20 0 0 30',
text: 'Delete Selected',
handler: function() {
this.up('mileage').deleteSelected(this);
}
}]
},{
xtype: 'mileageGrid',
itemId: 'mileage-grid',
store: 'TEST.store.MileageStore',
queryMode: 'local',
selType: 'rowmodel',
margin: '20 0 0 0',
height: 300,
multiSelect: true
}],

deleteSelected:function(thisData){
var me = thisData;
var selectedRecords = this.down('#mileage-grid').getSelection();
var store = Ext.data.StoreManager.lookup('TEST.store.MileageStore');
if (selectedRecords.length > 0){
Ext.MessageBox.show({
title: 'Confirm?',
msg: 'Delete ' + selectedRecords.length + ' selected mileages?',
buttons: Ext.MessageBox.YESNO,
fn: function(buttonId) {
if (buttonId == "yes") {
for( var i = 0; i < selectedRecords.length; i++) {
//delete from db
me.up('mileage').deleteRow(selectedRecords[i]);
}
store.remove(selectedRecords[0]);
store.sync();
}
if (buttonId == "no") {
//do nothing
}
}
});


}
},
deleteRow:function(record){
var values = record.data;
var maskMessage = 'Deleting...';


Ext.Ajax.request({
url: localtesting.contextPath + '/rest/mileage/deleteMileage',


method: 'POST',
jsonData: values,
success: function(response) {
var values = Ext.decode(response.responseText);
if (values.success) {
window.location.hash = 'delete';
} else {
Ext.Msg.show({
title: 'Failed to Delete Row/s',
msg: values.message,
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
}
},
failure: function(response) {
var values = Ext.decode(response.responseText);
Ext.Msg.show({
title: 'Failed to Delete Row/s',
msg: values.message,
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
}
});
}
});





MileageController.java:






@Controller
@RequestMapping(value = "/mileage/**")
public class MileageController {

@Autowired
private MileageHandler mileageHandler;

@RequestMapping(method = RequestMethod.POST, value = "/deleteMileage")
public @ResponseBody TestResponse<Mileage> deleteMileage(@RequestBody Mileage mileage, HttpSession session){
try{
mileageHandler.deleteMileage(mileage); //access database here
return new TestResponse<Mileage>(mileage,true,1,"Sucessfully Deleted");


}catch(Exception ex){
//do something
}
}

}





Whenever I click the Delete button, I encounter this error:

[E] Ext.data.proxy.Server.buildUrl(): You are using a ServerProxy but have not supplied it with a url.


Am i doing this correctly? or there is a better way to do this? Sorry but I am working with extJs for almost a week only.

yeghikyan
5 Mar 2015, 8:58 AM
You have commented the api property in your code, jedenfalls it must be something like this:


api: { read: 'AJAX_READ_URL',
destroy: 'AJAX_DELETE_URL'
},
on sync it will send the record's ID for removing.