PDA

View Full Version : Submitting grid ID's to backend PHP script



mschering
10 May 2007, 4:09 AM
Hi I'm new to Ext and very impressed.

I've already managed to build an existing app in the Ext layout and to present a grid from the database with json data.

I have a multi select grid and now I want to delete multiple rows from the database. It seems like a really easy question but I don't know what's the best way to do it.

I want to post the selected row database ID's to a file called "action.php" The action.php script handles the delete of the ID's and reports if it was successful.

Should I use Ext.data.Connection for this? If yes how can I post an array of values like a normal html form would do like this:


<input type="hidden" name="someid[]" value="1" />
<input type="hidden" name="someid[]" value="2" />
<input type="hidden" name="someid[]" value="3" />

Thanks for the help!

BernardChhun
10 May 2007, 4:25 AM
I do something very similar to what you need to do and here's some guidelines to achieve it:

1. Catch the click event of your delete button
2. If you have specified an Id config value in your grid's JsonReader, you may use this snippet to retrieve the selected rows ids. it will already be in an array form :)

var selectedRows = grid.selModel.selections.keys;
3. encode the array into JSON:

var params = "selectedRows=" + Ext.encode(selectedRows);
4. Make an XHR call with the params variable to tell your backend what was deleted. You'll need to decode it using json_decode() and do the appropriate action.
5. reload your grid's dataStore!

\:D/

mschering
10 May 2007, 5:06 AM
Great! thanks that works. If anybody else is interested here's my working code:



Notes = function(){
var layout;
var previewPanel;
var grid;
var ds;


return {

init : function(){
layout = new Ext.BorderLayout(document.body, {
south: {
split:true,
initialSize: 250,
minSize: 100,
maxSize: 400,
autoScroll:true,
collapsible:true,
titlebar: true,
animate: true
},
center: {

titlebar: true,
autoScroll:true,
closeOnTab: true
}
});

layout.beginUpdate();
previewPanel = new Ext.ContentPanel('no-south', 'Preview');
layout.add('south', previewPanel);


Ext.QuickTips.init();



ds = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({
url: 'notes_json.php'
}),

reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'name', mapping: 'name'},
{name: 'mtime', mapping: 'mtime'}
]),

// turn on remote sorting
//remoteSort: true
});


// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
header: "Name",
dataIndex: 'name',
width: 420,
css: 'white-space:normal;'
},{
header: "Modified at",
dataIndex: 'mtime'
}]);

// by default columns are sortable
cm.defaultSortable = true;

// create the editor grid
grid = new Ext.grid.Grid('no-center', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel(),
enableColLock:false,
loadMask: true
});

grid.addListener("rowclick", this.rowClicked, this);



// render it
grid.render();

var gridFoot = grid.getView().getFooterPanel(true);

// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 10,
displayInfo: true,
displayMsg: 'Displaying notes {0} - {1} of {2}',
emptyMsg: "No topics to display"
});

// trigger the data store load
ds.load({params:{start:0, limit:10}});


var tb = new Ext.Toolbar('toolbar');
tb.add(new Ext.Toolbar.Button({
id: 'delete',
text: 'Delete',
tooltip: {text:'Delete the selected items', title:'Tip Title'},
cls: 'x-btn-text-icon',
handler: this.onButtonClick
})
);




layout.add('center', new Ext.GridPanel(grid, {title: 'Notes', toolbar: tb}));

layout.getRegion('south').collapse();
layout.endUpdate();
},

onButtonClick : function(btn){
switch(btn.id)
{
case 'delete':
var selectedRows = grid.selModel.selections.keys;

var conn = new Ext.data.Connection();
conn.request({
url: 'action.php',
params: {task: 'delete', selectedRows: Ext.encode(selectedRows)}
});

ds.reload();


break;
}
},

rowClicked : function(grid, rowClicked, e) {
var selectionModel = grid.getSelectionModel();
var record = selectionModel.getSelected();

var south = layout.getRegion('south');

south.expand();


previewPanel.load({url: 'note.php?note_id='+record.data['id']});
}
};

}();
Ext.EventManager.onDocumentReady(Notes.init, Notes, true);


And the php backend:


<?php
/**
* @copyright Intermesh 2007
* @author Merijn Schering <[email protected]>
* @version $Revision: 1.13 $ $Date: 2006/10/20 12:36:43 $3
*
* This program is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the
* Free Software Foundation; either version 2 of the License, or (at your
* option) any later version.
*/


require_once("../../Group-Office.php");
$GO_SECURITY->authenticate();
$GO_MODULES->authenticate('newnotes');

//load contact management class
require_once($GO_MODULES->class_path."notes.class.inc");
$notes = new notes();

$task = $_REQUEST['task'];

switch($task)
{
case 'delete':

$selectedRows = json_decode(smart_stripslashes($_POST['selectedRows']));
foreach($selectedRows as $note_id)
{
$notes->delete_note($note_id);
}

break;
}

eyedol
29 Sep 2007, 7:53 AM
thanks it worked for me as well

druffus
6 Jul 2008, 6:42 AM
This is great and got me very close. My issue is that selection.keys seems to be producing the row keys and i am not sure how to turn that into the ids i need that are in my data set. I was thinking a foreach type situation, but was not able to get it working.

Thanks for any help.