[CLOSED] Grid with AutoSave (row update only)

  1. #1

    [CLOSED] Grid with AutoSave (row update only)

    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?
    Last edited by Daniil; Oct 21, 2014 at 7:01 AM. Reason: [CLOSED]
  2. #2
    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:)
  3. #3
    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 :


    1. Hide the update/cancel button - Acheived
    2. Click on a new row will automatically sync the current row (if dirty) cancel (if not dirty) - Acheived
    3. Click out of the grid will sync/cancel the current row if dirty/not dirty - Acheived
    4. Disable Enter key function - Acheived
    5. 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.
    6. 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
  4. #4
    "RowEditing" doesn't equal "RowEditor".
    http://docs.sencha.com/extjs/4.2.1/#...gin.RowEditing
    http://docs.sencha.com/extjs/4.2.1/#...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.
  5. #5
    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!

Similar Threads

  1. [CLOSED] Grid with AutoSave with Combobox
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 08, 2014, 11:57 AM
  2. Replies: 4
    Last Post: Jun 11, 2013, 6:02 AM
  3. Grid with AutoSave sample
    By PetrSnobelt in forum 1.x Help
    Replies: 3
    Last Post: Apr 27, 2011, 11:33 AM
  4. Replies: 4
    Last Post: Feb 02, 2011, 8:23 PM
  5. [1.0] Examples Explorer | GridPanel > Update > AutoSave
    By r_honey in forum Open Discussions
    Replies: 3
    Last Post: Apr 29, 2010, 5:12 AM

Posting Permissions