[4.1.0] Row editing plugin doesn't fire "canceledit" when changing row

[Fire-Dragon-DoL]

Referencing this topic for this bug: http://www.sencha.com/forum/showthre...691#post811691

If autoCancel is set to true, and we move the editor on a different row, the changes are actually canceled but "canceledit" event is not fired.

I think that if any changes are reverted (in any moment), canceledit should be fired. In this situation should be fired too.

[mitchellsimoens]

The event is only fired when you press the cancel button.

[andersonjohnf]

Not to necro this thread, but why is it considered ok to have an important event (moving row editor to a new record) not fire any event? It gives us no way to handle the very common scenario where we may want to remove the newly added record from the store if they cancel without entering all valid information.

Edit: This is still an issue in Ext 5 btw

[Fire-Dragon-DoL]

Not to necro this thread, but why is it considered ok to have an important event (moving row editor to a new record) not fire any event? It gives us no way to handle the very common scenario where we may want to remove the newly added record from the store if they cancel without entering all valid information.

Edit: This is still an issue in Ext 5 btw

I agree with you, I ended dropping Ext, faced various similar issues

[andersonjohnf]

Ext.define('MyApp.patch.Editing', {
    override: 'Ext.grid.plugin.Editing',
    onCellClick: function(view, cell, colIdx, record, row, rowIdx, e) {
        if (this.editing) return; // kill moveByClick
        
        var expanderSelector = view.expanderSelector,
            columnHeader = view.ownerCt.getColumnManager().getHeaderAtIndex(colIdx),
            editor = columnHeader.getEditor(record);


        if (this.shouldStartEdit(editor) && (!expanderSelector || !e.getTarget(expanderSelector))) {
            this.startEdit(record, columnHeader);
        }
    }
});

I ended up just doing an override that kills move by click in a roweditor when you are currently editing. In our application there isn't a reason for someone to be able to bounce between rows without finishing the one they're on. I'm pretty surprised that this isn't a config option.

Edit: That override is for ExtJS 5.0.1 btw

[davmillar]

Any news on this? It's still present in 6.0.1. @andersonjohnf your override works almost perfectly, but you can still tab and arrow key to the other rows and start them editing. It doesn't seem to work with manually calling the cancel method when beforeedit is fired either.

[jvdmr]

I bumped into this issue in ExtJS 6.x as well, so I updated the overrides posted before for 6.x:

Ext.define("MyApp.grid.plugin.RowEditing", {
  requires: ["Ext.grid.plugin.RowEditing"],
  override: "Ext.grid.plugin.RowEditing",


  confirmCancelMsg: "",


  moveEditorByClick: function () {
    var me = this;
    if (me.editing) {
      var args = arguments;
      me.getContextFieldValues();
      if (me.autoCancel || Ext.Object.equals(me.context.originalValues, me.context.newValues)) {
        me._moveEditor(me, args);
      } else {
        Ext.Msg.confirm("", me.confirmCancelMsg, function (btn) {
          if (btn == "yes") {
            me._moveEditor(me, args);
          }
        });
      }
    }
  },

  _moveEditor: function (me, args) {
    me.fireEvent("moveeditor", me, me.context);
    me.superclass.onCellClick.apply(me, args);
  }
});

This checks if autoCancel is on, if it's not it checks if you've already entered any new data in the current editor, and if you have it asks you if you want to cancel those changes or not. If you don't cancel, the editor stays.


In all other cases, it moves the editor after firing a new 'moveeditor' event which you can treat the same as the existing 'canceledit' event (or differently, if you prefer).

[hbulens]

I bumped into this issue in ExtJS 6.x as well, so I updated the overrides posted before for 6.x:

Ext.define("MyApp.grid.plugin.RowEditing", {
  requires: ["Ext.grid.plugin.RowEditing"],
  override: "Ext.grid.plugin.RowEditing",


  confirmCancelMsg: "",


  moveEditorByClick: function () {
    var me = this;
    if (me.editing) {
      var args = arguments;
      me.getContextFieldValues();
      if (me.autoCancel || Ext.Object.equals(me.context.originalValues, me.context.newValues)) {
        me._moveEditor(me, args);
      } else {
        Ext.Msg.confirm("", me.confirmCancelMsg, function (btn) {
          if (btn == "yes") {
            me._moveEditor(me, args);
          }
        });
      }
    }
  },

  _moveEditor: function (me, args) {
    me.fireEvent("moveeditor", me, me.context);
    me.superclass.onCellClick.apply(me, args);
  }
});

This checks if autoCancel is on, if it's not it checks if you've already entered any new data in the current editor, and if you have it asks you if you want to cancel those changes or not. If you don't cancel, the editor stays.


In all other cases, it moves the editor after firing a new 'moveeditor' event which you can treat the same as the existing 'canceledit' event (or differently, if you prefer).

Could you give us a sample? This does nothing in 6.0.2.

[jvdmr]

Sure, although I'm currently on 6.1.2 so I'm not sure if this has the same effect on your codebase. Here's an example of how we use this (you'll need to add a listener to your View to catch the 'afterrender' event and trigger the 'afterrender' function in this controller):

Ext.define("MyApp.view.pages.ProductsOverviewPageController", {
  extend: 'Ext.app.ViewController',
  alias: 'controller.productsOverview',

  afterrender: function () {
    var ctrl = this;
    var grid = ctrl.lookupReference("productsGrid");

    grid.addPlugin(
      Ext.create('Ext.grid.plugin.RowEditing', {
        pluginId: "rowEditingPlugin",
        clicksToMoveEditor: 1,
        autoCancel: false,
        confirmCancelMsg: "Are you sure?",
        errorSummary: false,
        listeners: {
          validateEdit: function (event, context) {
            var indexOfRecordWithCode = grid.store.findExact("code", context.newValues.code);
            var foundProductIsCurrentProduct = indexOfRecordWithCode == context.rowIdx;
            if (indexOfRecordWithCode != -1 && !foundProductIsCurrentProduct) {
              Ext.Msg.alert("", "Something went wrong");
              return false;
            }
            return true;
          },
          beforeedit: function (editor, context) {
            MyApp.util.Utilities.incUnsavedDataCounter();
          },
          edit: function (editor, context) {
            context.grid.fireEvent("saveProduct", context.record, context.grid);
            context.grid.store.sort("code", "ASC");
          },
          moveeditor: function (editor, context) {
            ctrl.cancelEdit(editor, context);
          },
          canceledit: function (editor, context) {
            ctrl.cancelEdit(editor, context);
          }
        }
      })
    );
  },

  cancelEdit: function (editor, context) {
    if (context.record.get("id") == undefined) {
      context.grid.store.remove(context.record);
    }
    BackOffice.util.Utilities.decUnsavedData();
    this.lookupReference("addProductButton").enable();
  }

});