Add New Row To Grid Panel With RowEditing Plugin

[azinyama]

Hi all!!!

I'm using Ext.Direct Router to load/create/update/delete records. Code below:




Ext.define('ClaimCatch_RIS.store.Procedure',
{
extend : 'Ext.data.Store',
id : 'Procedures',
autoLoad : false,
autoSave : false,
autoSync : true,
remoteSort : true,
model : 'ClaimCatch_RIS.model.Procedure',
proxy : {
type : 'direct',
reader : {
type : 'json',
successProperty : 'success',
messageProperty : 'message',
totalProperty : 'total',
root : 'data',
idProperty : 'Procedure_RowID'
},
writer : {
type : 'json',
encode : false,
writeAllFields : true
},
api : {
create : _ProcedureHandler.Create_Procedure,
read : _ProcedureHandler.Load_Procedure,
update : _ProcedureHandler.Update_Procedure,
destroy : _ProcedureHandler.Delete_Procedure
},
listeners : {
exception : function(proxy, response, operation)
{
Ext.MessageBox.show(
{
title : 'Remote Exception: Procedure',
msg : operation.getError(),
icon : Ext.MessageBox.ERROR,
buttons : Ext.Msg.OK
});
}
},
afterRequest: function (request, success)
{
if (request.action == 'read')
{
this.readCallback(request, success);
}
else if (request.action == 'create')
{
this.createCallback(request, success);
}
else if (request.action == 'update')
{
this.updateCallback(request, success);
}
else if (request.action == 'destroy')
{
this.deleteCallback(request, success);
}
},
readCallback: function (request, success)
{
if (!request.operation.success)
{
Ext.Msg.show(
{
title : 'Procedure Load Error',
msg : request.operation.getError(),
buttons : Ext.Msg.OK,
icon : Ext.Msg.WARNING
});
}
},
createCallback: function (request, success)
{
if (!request.operation.success && request.operation.hasException())
{
Ext.Msg.show(
{
title : 'Procedure Create Error',
msg : request.operation.getError(),
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.ERROR
});
}
// else
// {
// request.records[0].phantom = true;
// }
},
updateCallback: function (request, success)
{
if (!request.operation.success && request.operation.hasException())
{
console.log(request.records[0]);
request.records[0].rejectChanges();

Ext.Msg.show(
{
title : 'Procedure Update Error',
msg : request.operation.getError(),
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.ERROR
});
}
},
deleteCallback: function (request, success)
{
if (!request.operation.success && request.operation.hasException())
{
Ext.Msg.show(
{
title : 'Procedure Delete Error',
msg : request.operation.getError(),
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.ERROR
});
}
},
scope : this
}
});


It works fine, but my 'problem' comes when I try to add a new row to the grid. I wanted to add a row with out actually calling the create direct method. Is this possible. Below my controller all function:



onAdd : function(btn)
{
var isBlank = false;

this.getProcedureStore().each(function (record)
{
if (record.data['Procedure_RowID'] == 0)
{
Ext.Msg.show(
{
title : 'Warning',
msg : 'Please update the blank procedure first.',
buttons : Ext.Msg.OK,
icon : Ext.Msg.WARNING
});

if (null == record.index)
{
record.index = 0;
}

isBlank = true

this.getProcedureWindow().plugins[0].startEdit(record.index, 1);
return false;
}
}, this);

if (!isBlank)
{
this.getProcedureStore().insert(0, new this.getProcedureModel());

this.getProcedureWindow().plugins[0].startEdit(0, 1);
}
},


Second question is. Once a new record has been saved to the database and the record is returned. How do I update the store. I'm using Procedure_RowID as my key which is sent back by the database and I want it to be update/set in the store for the saved record.

[sword-it]

Hi,

you can see this link: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/row-editing.html

[azinyama]

Thanks. I fixed the problem. The root property for the reader was set tor 'result' coming from the server and not to 'data' set in the store.

[sandeep23]

I want to add 3 Column with Year, posted by and comment in the Grid panel.
I have taken the plugin to get the editor.

Can any one write a code and give for the data base to update
I have taken the data source as sqldatasource1.

I want to update the record and it should enter into the data base

[fredbaba]

How would one conditionally remove the created record on a cancel event? Currently, the cancel button cancels the RowEditing plugin, but does not remove the created record. This feels like the more natural behavior, but I've been struggling to make it work. Any ideas?

[azinyama]

Hi!!! don't know if this is what you are looking for, but here is what I do to remove phantom records if the user presses cancel.
In side my controller



init: function()
{
this.control(
{
'#gridWithEditor':
{
canceledit: this.onCancelEditing
}
});
},

onCancelEditing: function(editor, e, eOpts)
{
this.getGridStore().each(function(record)
{
if (record.phantom)
{
this.getGridStore().remove(record);
return false;
}
}, this);
},


Hope this helps

[fredbaba]

Thanks. I'll give that a try.

[fredbaba]

How do I keep my proxy from sending a delete operation for phantom records? My 'oncanceledit' handler is as follows. I have autosync disabled, so I'm not sure why the delete is being sent to the server on the remove call.


onCancelEdit: function(editor, e, eOpts ){
e.record.reject();
// Remove phantom records...
this.getStore().each(function(record) {
if (record.phantom) {
this.getStore().remove(record);
return false;
}
}, this);
this.getStore().sync();
},