PDA

View Full Version : CRUD Grid Multi Delete



codeart.ch
11 Aug 2010, 11:02 AM
Hello, im trying to implement a multiselection delete function for my gridpanel.

The script to delete the items from the grid store works perfect but the CRUD destroy function makes for each deleted item a own ajax request (see attachment). I dont know why it appends a additional "id" for each of this requests.

Can someone please explain how i able to do a single delete request with the CRUD api with multiple delete "ids" as params.
Or could this be an extjs bug ? im using ext 3.3 beta1 but the behavior was the same in ext 3.2.

thanks a lot



this.onDelete = function() {
var delItems = grid.getSelectionModel().getSelections();
if (!delItems) {return false;}
console.log('Items to delete:');
console.log(delItems);
this.getStore().remove(delItems)
}


// Row Selection Model
this.sm = new Ext.grid.RowSelectionModel({
singleSelect:false
});

// Proxy
this.proxy = new Ext.data.HttpProxy({
api:{
read:'cfc/gateway/ormJs/systemLangdata.cfc?method=readStoreExt',
create:'cfc/gateway/ormJs/systemLangdata.cfc?method=createStoreExt',
update:'cfc/gateway/ormJs/systemLangdata.cfc?method=updateStoreExt',
destroy:'cfc/gateway/ormJs/systemLangdata.cfc?method=deleteStoreExt'
}
});

// Json Writer
this.writer = new Ext.data.JsonWriter({
encode:true,
returnJson:true,
listful:true,
writeAllFields:false
});

// Datastore
this.store = new Ext.data.Store({
proxy:this.proxy,
reader:this.reader,
writer:this.writer,
remoteSort:true,
autoSave:true,
autoLoad:{params:{start:0,limit:jsGateway.config.setting["extjs_page_size"]}},
listeners:{
exception:function(proxy, type, action, options, res) {
var msg = 'Error';
if(action == 'read') {
msg = jsRequestGateway.lang["langdata_read_error"];
}
if(action == 'add') {
msg = jsRequestGateway.lang["langdata_add_error"];
}
if(action == 'update') {
msg = jsRequestGateway.lang["langdata_update_error"];
}
if(action == 'destroy') {
msg = jsRequestGateway.lang["langdata_delete_error"];
}
new ca.systemAlert({
iconCls:'icon-exclamation',
title:jsRequestGateway.lang["general_status"],
html:msg
}).show(document);
}
}
});

Andrew Peacock
16 Aug 2010, 12:30 AM
Hi,
I'm newish to extjs, but I solved it as follows:

My grid is extended from editorgrid panel to add some needed functionality, and it has the following method:


deleteMultipleRows: function() {
var rowsToDelete = this.getSelectionModel().getSelections();
var grid = this;
Ext.iterate(rowsToDelete, function(key, item) {
console.log("Deleting " + this.data.account_id);
var record = grid.getStore().getById(this.data.account_id);
grid.getStore().remove(record);
});
}In the grid instance, I'm using:

var gridAccountsCheckboxSel = new Ext.grid.CheckboxSelectionModel();to create the checkboxes for multiple selections.

And also in the grid toolbar I've got:


{
text: 'Delete',
icon: 'images/icons/delete-16.png',
handler: function(button, event){
var grid = this.ownerCt.parentGrid;
Ext.Msg.show({
title:'Delete?',
msg: 'Are you sure you want to delete these accounts?',
buttons: Ext.Msg.OKCANCEL,
fn: function(buttonId) {
if (buttonId == 'ok' ) {
gridAccounts.deleteMultipleRows();

} else {

}

},
animEl: 'elId',
icon: Ext.MessageBox.QUESTION
});

}
}So the button triggers the custom method. The custom method reads the selectionmodel's selected items, and then removes from the store. The store then calls the API.

The API integrates into a PHP script:



public function deleteAccount($json){

// If a single data item exists (for deleting a single account) turn it into a one-item array. Multiple
// deletes are already in array format.
if (! is_array($json->data)) {
$accountDataItems = Array($json->data);
} else {
$accountDataItems = $json->data;
}

foreach ($accountDataItems as $accountData) {
$sql = "DELETE FROM accounts WHERE account_id IN (" . join(",", $accountDataItems) . ")";
$this->db->query($sql);
}
$output = array(
"success" => true,
"total" => 1,
"data" => $json
);
return $output;
}



I'm sure someone will have a more efficient method, but this is something I've hacked together after a similar struggle to yourself.

Hope it helps,
Andy

codeart.ch
16 Aug 2010, 2:47 PM
Thank you Andy for your detailed answer.

It would be very intressting to see the requests from your script. Can you please post a screen from firebug (like i did) when you delete multiple rows ?

Greetings Simon

Andrew Peacock
17 Aug 2010, 5:59 AM
Will do, but I'm not at machine now - I'll post some time later today
Andy

Andrew Peacock
17 Aug 2010, 2:17 PM
And here's my Firebug output:
22005