PDA

View Full Version : [CLOSED] Grid with AutoSave (row update only)



glenh
Oct 09, 2014, 8:58 AM
Hi

I have seen in the Autosave example that an ajax call can be made on every cell edit within a grid to persist changes. However, I don't want the grid to be that chatty and I would prefer to only save when you have finished editing a row.

I assume there is no setting for this on a store/grid?

If not I thould I could implement this myself. To persist the changes after I have finished editing on a row by row basis is to catch

1. Deselect event on the grid - will fire when you select a new row and the editing row is deselected.
2. When the grid loses focus. However, I am having difficuilty acheiving this. If a user starts editing a row and then clicks on a control or button outside of the grid...which event is thrown?

At the moment I can't get the grid to fire any events when clicking outside of it....it appears that it doesn't fire the blur event which I thought it would?

Any suggestions?

Daniil
Oct 09, 2014, 8:08 PM
Hi @glehn,


I assume there is no setting for this on a store/grid?

You are right.


At the moment I can't get the grid to fire any events when clicking outside of it....it appears that it doesn't fire the blur event which I thought it would?

Yes, it might be problematic. It would be nice, but a GridPanel is not considered as a focusable component. So, no focus and blur events.


If a user starts editing a row and then clicks on a control or button outside of the grid...which event is thrown?

Theoretically, you could listen to a MouseDown event on the <body> element and determine where a click was - inside the GridPanel or outside. Meanwhile, you could listen to a CellEditing's Edit event and check there where was the click.

By the way, it really looks you could use a RowEditor:)

glenh
Oct 15, 2014, 10:34 AM
Hi Danil

Ok thanks for your reply. I have started looking at the RowEditor and it looks like it goes some way there of what Im trying to acheive.

Please find the requirements that Im looking for to make an editable grid that only updates when a row is updated (not every cell edit) - This I think creates a nice editable grid without the Update/Cancel buttons which i find cumbersome :



Hide the update/cancel button - Acheived
Click on a new row will automatically sync the current row (if dirty) cancel (if not dirty) - Acheived
Click out of the grid will sync/cancel the current row if dirty/not dirty - Acheived
Disable Enter key function - Acheived
Tab key - this works similar to a normal editable grid. Tab key press when in last cell will go to next row and sync the current row (if dirty) or cancel (if not dirty). Same function if Shift Tab pressed and in first row.
Esc key will first do an undo in the current field i.e same as Ctrl-Z. if cell is not dirty then cancel row. If the current row is a new row then it will delete the row.


Currently I am working on number 5 and Im trying to get a hook into the KeyNav but it doesnt seem to work. Ive noticed that there is a KeyNav in the RowEditor plugin...



me.keyNav = new Ext.util.KeyNav(me.el, {
enter: plugin.completeEdit,
esc: plugin.onEscKey,
scope: plugin
});


Im hooking into this keyNav to try and get the Tab key funcitonality to work but the handler never fires (ie. the alert doesnt fire). I'm simply adding a KeyMap binding after rendering of the grid with the following code




<AfterRender Handler="#{RowEditing1}.keyNav.map.addBinding({
key: Ext.EventObject.TAB,
handler: function(){alert('hello');},
defaultEventAction: 'stopEvent'
});">
</AfterRender>

Using Firebug I can see the mapping has been added and I have tested my code on another example to see that this method does work. Are you able to tell me a way in which I can get a hook into the Tab key of the RowEditing plugin.

Thanks
Glen

Daniil
Oct 15, 2014, 7:25 PM
"RowEditing" doesn't equal "RowEditor".
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.RowEditing
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.RowEditor

I would try this listener of the GridPanel:

<AfterRender Handler="this.editingPlugin.getEditor().on('afterrender', function() {
this.keyNav.map.addBinding({
key: Ext.EventObject.TAB,
handler: function() { alert('hello'); },
defaultEventAction: 'stopEvent'
});
});" />

"this.editingPlugin" is a RowEditing instance. A RowEditing's .getEditor() call returns a RowEditor instance.

glenh
Oct 16, 2014, 2:51 AM
Hi Daniil

Thanks for pointing this out. I've been working with both files and for whatever reason didn't pick up on it....spent a tonne of time trying to figure it out...sometimes just a fresh pair of eyes help :)!

Thanks again!