How do update/add to editable grid

[GeXus]

Sorry, if this has been asked a lot, but I just can't seem to find an answer... I have the an editable grid getting data from an XML document which is getting it's data from the DB. How do I update edited fields and add new ones?


This is the JS


Ext.onReady(function(){
Ext.QuickTips.init();
function formatBoolean(value){
return value ? 'Yes' : 'No';
};

function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
// shorthand alias
var fm = Ext.form, Ed = Ext.grid.GridEditor;

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([{
id: 'id',
header: "Id",
dataIndex: 'id',
width: 50,
hidden: true
},{
header: "Name",
dataIndex: 'name',
width: 200,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
header: "Username",
dataIndex: 'username',
width: 100,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
header: "Password",
dataIndex: 'password',
width: 100,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
header: "Date Added",
dataIndex: 'created_date',
width: 95,
renderer: formatDate,
editor: new Ed(new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
}))
},{
header: "Active?",
dataIndex: 'active',
width: 75,
renderer: formatBoolean,
editor: new Ed(new fm.Checkbox())
}]);

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

// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var Sponsors = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'name', type: 'string'},
{name: 'username', type: 'string'},
{name: 'password'},
{name: 'created_date', type: 'date', dateFormat: 'm/d/Y'},
{name: 'active', type: 'bool'}
]);

// create the Data Store
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'data/sponsors.php'}),

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'item'
}, Sponsors)
});

// create the editor grid
var grid = new Ext.grid.EditorGrid('editor-grid', {
ds: ds,
cm: cm,
enableColLock:false
});

var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');


// render it
grid.render();


var gridHead = grid.getView().getHeaderPanel(true);
var tb = new Ext.Toolbar(gridHead, [{
text: 'Add New Sponsor',
handler : function(){
var s = new Sponsors({
name: 'Sponsor Name',
username: '',
password: '',
created_date: new Date(),
active: false
});
grid.stopEditing();
ds.insert(0, s);
grid.startEditing(0, 0);
}
}]);

// trigger the data store load
ds.load();
});



This is the XML


<?
header("Content-type: application/xhtml+xml");
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n";

$query = "select * from sponsors";
$results = mysql_query($query);
echo "<sponsors>";
while($row = mysql_fetch_array($results)){

echo "<item>";
echo "<id>".$row['id']."</id>";
echo "<name>".$row['name']."</name>";
echo "<username>".$row['username']."</username>";
echo "<password>".$row['password']."</password>";
echo "<created_date>03/15/2006</created_date>";
echo "<active>true</active>";
echo "</item>";


}

echo "</sponsors>";
?>



Any examples would be really helpfull, I'm just at a loss.

Thank you very much!

[Ronaldo]

Attach a handler:

this.grid.on('rowclick', this.onRowClick, this);

And do something with the row given at rowIndex. For more info, look in the API (http://extjs.com/deploy/ext/docs/) and the examples there on the bottom of the list.


onRowClick : function(grid, rowIndex, e) {
var rec = grid.dataSource.getAt(rowIndex).data;
....
Do something usefull with the data
}

Of course, you can also step through the grid.dataSource.data yourself...