How do I get new rows in a grid? (help me please)

[ethraza]

I crossed the night trying to figure out how can I get new added rows in a grid and if exist a way... I simple don't know.
Only because I want a grid that handles insertion, deletion and update all using only the grid itself. (I mean with no forms to do that)

What I'm trying to do is:
In my Grid header I have 4 buttons (Insert, Remove, Reload and Commit changes), so I can edit the values that come from database, insert new rows and edit that rows and remove rows. After to do any of that things I click the "Commit changes" button to send to my php, via json, all the things to update, the new rows to insert and the ones to delete.

I have created a removedRows array to store the removed rows, but the same don't works for added rows because the new inserted Rows don't have an ID or values when add event is launched.

The fact is... Is easy to discovery the updated rows with getModifiedRecords(), because all changed itens get dirty. But the removed itens don't get dirty, they simple go away, and added itens don't get dirty too, even if a edit they cells, they get marked with the red triangle but they don't come in getModifiedRecords().

Please, somebody...
How can I discovery what rows was added to my grid?
And if possible... there is a way to discovery the removed rows too, without the need of keep my primaryKey of deleted rows?

Here is my code so far:



Ext.get('locbox').boxWrap();
// returns [id, Grid, dataStore]
var locgrid = ATW.jsonGrid(null,'loc_consulta_exec.php?sid=<?echo $_REQUEST['sid']?>',{start:0,limit:15},null,null,'loccon',15);

var deletedRows = new Array;
var gridHead = locgrid[1].getView().getHeaderPanel(true);
var tb = new Ext.Toolbar(gridHead,[
{
text: 'Incluir',
icon:'img/icons/default/add.png',
cls:'x-btn-text-icon',
handler: function(){
var ds = locgrid[1].getDataSource();
var nr = new Array;
Ext.each(ds.fields.keys, function(k){
nr[k]='';
});
locgrid[1].stopEditing();
locgrid[2].insert(0, new locgrid[2].reader.recordType(nr));
locgrid[1].startEditing(0, 0);
}
},{
text: 'Excluir',
icon:'img/icons/default/delete.png',
cls:'x-btn-text-icon',
handler: function(){
var sr = locgrid[1].getSelectionModel().getSelected();
deletedRows.push(sr.get('LocId'));
locgrid[2].remove(sr);
}
},'-',{
tooltip: 'Recarregar',
icon:'img/icons/default/arrow_refresh.png',
cls:'x-btn-icon',
handler: function(){
locgrid[1].getDataSource().reload();
//locgrid[1].getView().refresh();
}
},'-',{
text: 'Gravar Altera&ccedil;&otilde;es',
icon:'img/icons/default/accept.png',
cls:'x-btn-text-icon',
handler: function(){
var dt = new Array;
Ext.each(locgrid[2].getModifiedRecords(), function(record){
dt.push(record.data);
});
//ajaxRequest('loc_consulta_grava.php','sid=<?echo $_REQUEST['sid']?>&update='+Ext.util.JSON.encode(dt)+'&remove='+Ext.util.JSON.encode(deletedRows));
alert('&update='+Ext.util.JSON.encode(dt)+'&remove='+Ext.util.JSON.encode(deletedRows));
locgrid[2].commitChanges();
}
}
]);
And attached is a screenshot of my grid to help to undestand me!

Thanks for any help!

[Animal]

You add Records:

http://extjs.com/deploy/ext-1.1-beta2/docs/output/Ext.data.Record.html

to the Grid's Store:

http://extjs.com/deploy/ext-1.1-beta2/docs/output/Ext.data.Store.html

[ethraza]

I think that I'm doing it here: locgrid[2].insert(0, new locgrid[2].reader.recordType(nr)); // ( locgrid[2] = ds )
Don't?
In the screenshot I show a new added row (the first one), it is working.

But I want to do 2 or 3 insertions, some deletions, some edits and after all discovery all the new added rows, the removed rows and the edited rows (this last is easy to do with (getModifiedRecords()) .
I wold like something like getModifiedRecords() are to the edited rows. A getAddedRecords() and a getRemovedRecords() if they exists!
Or if you know if exist a place in the array of the dataSource object that keeps that information, will makes me happy too.

Thank you for the help!

ps. I'm using 1.1-Beta2 too.

[Animal]

You have to know which rows you added and which you deleted. Keep a collection of them yourself.

[ethraza]

Thanks for the attention Animal!

Ok, I'm already doing this to the removed ones with my removedRows array.
But I'm having a bad time with the inserted ones.

I noticed that if I subscribe to the add event, it returns 3 things. The second one is the (records : Ext.data.Record[]) how the Docs says, and I noticed that this record have an ID.

So if I do a

dataStore.on('add',function(a,b,c){alert(b.id)}); It returns and ID! (something like 4321)

I can keep track of that IDs to know the inserted rows, but how can I get the row pairs array with this ID?
It is probably easy, but have not sleep yet. ~o)

EDITED:

Ok, ok! :)
b.data is the answer.

Thanks!

[ethraza]

I resolved my problem madding a subscription to the update event.

The add event of the data.Store in 1.1-Beta2 is sending an 'undefined' result in the second argument that is suposed to be the records (Ext.data.Record[]).
Is it a bug?