PDA

View Full Version : Add New Row To Grid Panel With RowEditing Plugin



azinyama
4 Sep 2012, 12:31 PM
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
4 Sep 2012, 10:42 PM
Hi,

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

azinyama
5 Sep 2012, 2:39 AM
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
9 Sep 2012, 11:19 PM
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
22 Oct 2012, 10:42 AM
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
22 Oct 2012, 9:14 PM
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
23 Oct 2012, 2:17 PM
Thanks. I'll give that a try.

fredbaba
24 Oct 2012, 8:04 AM
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();
},