Apr 18, 2013, 4:20 PM
Sync store problem
Hello
I'm trying to use the store to centralize the CUD operation but I have some problems. I use for the moment a gridpanel with a commandcolumn:
So perhaps I'm going in the wrong direction, what I want to achieve is:
Somebody has already done it? Can somebody share some code? Thanks
I'm trying to use the store to centralize the CUD operation but I have some problems. I use for the moment a gridpanel with a commandcolumn:
<ext:CommandColumn runat="server">
<Commands>
<ext:GridCommand CommandName="Delete" Icon="Delete" />
<ext:GridCommand CommandName="Edit" Icon="Pencil" />
</Commands>
<Listeners>
<Command Handler="if (command=='Delete') Ext.Msg.confirm('Confirm', 'Delete?', function(btn,text){if (btn=='yes') #{GridPanel1}.store.remove(record);});" />
</Listeners>
</ext:CommandColumn>
And in the store I added a listener to the remove event:<Listeners>
<Remove Handler="this.sync();" />
</Listeners>
So when an entry is deleted, it is removed from the store and the store sync the change with the server, the problem is, when an error server side happens, the store remains in a dirty state and the delete entry doesn't appear anymore in the grid, so I have added a reject changes in the exception event:<Listeners>
<Remove Handler="this.sync();" />
<Exception Handler="this.rejectChanges();" />
</Listeners>
And this worked, so I moved on to the create method and I added the same logic for the add event in the store:<Listeners>
<Remove Handler="this.sync();" />
<Add Handler="this.sync();" />
<Exception Handler="this.rejectChanges();" />
</Listeners>
And here began the problem, because when a delete fails and throws an excepton and therefore the reject changes is invoked, it triggers also the add event to reinsert the deleted entry in the store. So I though to check if the store was dirty before syncing it:<Listeners>
<Remove Handler="console.log('remove: '+this.isDirty()); if (this.isDirty()) this.sync();" />
<Add Handler="console.log('add: '+this.isDirty()); if (this.isDirty()) this.sync();" />
<Exception Handler="this.rejectChanges();" />
</Listeners>
But it was useless because the add event is invoked during the reject changes and the store is still dirty, so i though to suspend the events during the reject changes:<Listeners>
<Remove Handler="console.log('remove: '+this.isDirty()); if (this.isDirty()) this.sync();" />
<Add Handler="console.log('add: '+this.isDirty()); if (this.isDirty()) this.sync();" />
<Exception Handler="this.suspendEvents(); this.rejectChanges(); this.resumeEvents(); " />
</Listeners>
And it worked, at the least for the store, but when the deleted rows came back in the grid the command column was empty, no delete and no edit buttons.So perhaps I'm going in the wrong direction, what I want to achieve is:
- Create: submit the create operation to the server in case that it fails don't leave the create dialog until the operation is either successful or the user cancel the operation
- Update: submit the update operation to the server in case that it fails don't leave the update dialog until the operation is either successful or the user cancel the operation
- Delete: submit the delete operation to the server in case that it fails show an error message and do not remove the entry from the UI if it is successful remove the entry from the UI
Somebody has already done it? Can somebody share some code? Thanks