EditorGridPanel - Adding new rows
Posted in xn--kfs74mzzid01b.com edit by rose on January 7th, 2009
I have a question, seems simple, but haven't been able to figure it out either by myself or through forum topics.
I have an EditorGridPanel (which uses a JSONReader with an id property) which has ADD, DELETE and SAVE buttons in the toolbar.
The DELETE and SAVE (saving of changes to existing rows) depends on the fact that the id of the record in the JSONstore corresponds to the ROWID of the same record in the database, meaning, when a AJAX request is sent, the row id of that record is sent to the backend which processes that request and sends back the result of the operation along with the row id.
But I seem to have a problem which doing the adding of a new record ;(
Regardless of the id property being set or not, when a new row is added as shown below
tbar:[{
text:'Add',
iconCls:'add',
handler: function() {
var e = new tblsrec({
COL1: "",
COL2: ""
});
dtgrid.stopEditing();
var kk = TblStore.getCount();
TblStore.insert((kk), e);
dtgrid.startEditing(kk, 2);
},
tooltip: 'Click to add a new record.'
the id property of the new row always remains the same = 1000 + # of the new row in the grid
Now, when a save is done, the row is stored in the database with a rowid which is unique to the table (which is not the same as the default one assigned by the Editor Grid Panel). To enable editing of this new row once it is saved, I have to update the row id of the new record with the actual rowid (from the database) returned by the AJAX call (originally sent to save the new record).
So far, I think I have two ways of setting the record id with a new value -
1. When the AJAX response comes back to the client side, update the id of that new row in the grid with the actual rowid from the database as shown below
function fnDelete(btn){
var selectedRows = dtgrid.getSelectionModel().getSelections();
for (i = 0; i < selectedRows.length; i++) {
var rid = selectedRows[i].id;
console.log('removing id "' + rid + '"');
TblStore.getById(rid).set(id, newcnt);
}
}
2. While creating a new row, set the id right away as shown below
tbar:[{
text:'Add',
iconCls:'add',
handler: function() {
var tmpcntr = 9900000;
var e = new tblsrec({
id: tmpcntr,
ROW_ID: tmpcntr,
COL1: "",
COL2: ""
});
dtgrid.stopEditing();
var kk = TblStore.getCount();
TblStore.insert((kk), e);
dtgrid.startEditing(kk, 2);
},
tooltip: 'Click to add a new record.'
But, this setting of the id doesn't work. The id is still automatically set by the grid panel.
But both the above don't work.
Any ideas how to get the id of the record set to the actual value returned by the AJAX call?
Alternatively, is there a better way to do this? Thanks,
addBlankRecord:
,addBlankRecord: function() {
var store = this.getStore();
var orec, row;
if(store.recordType) {
orec = new store.recordType();
orec.data = {};
orec.fields.each(function(field) {
orec.data[field.name] = field.defaultValue;
});
orec.data.newRecord = true;
orec.commit();
store.add(orec);
row = store.indexOf(orec);
if(row && undefined !== this.editOnAddCol) {
this.startEditing(row, this.editOnAddCol);
}
}
}
newRecord flag tells server to insert instead of update
Success callback:
,success:function(form, action){
var o = action.result;
var records = this.store.getModifiedRecords();
if(true === o.success) {
// handle insert ids of new records
var i;
for(i = 0; i < records.length; i++) {
if(o.insertIds && o.insertIds[i]) {
records[i].set(this.store.pKey, o.insertIds[i]);
records[i].id = o.insertIds[i];
delete(records[i].data.newRecord);
}
}
this.commitChanges();
this.fireEvent('submitsuccess', this, records);
}
else {
this.showError(action.result.error, this.saveFailedText);
}
} // end of success handler
There are some extra things you don't need, like pKey...
#If you have any other info about this subject , Please add it free.# |
