ExtJS form cancel, Save Changes If Changes Have Been Made

Posted by Peter Kellner on February 13, 2014 · 2 mins read

 

It seems like when a user cancels out of form after making changes, the obvious thing that should happen is:

  • If Changes Have Been Made, Prompt User To Save
  • If No Changes Have Been Made Just Exit Pretty simple, but we still have to do it.
    Without showing all the detail code, consider the code below which runs in the Sencha ExtJS MVC controller that gets executed when the user presses cancel on a running form like the following:

image

 

image

The JavaScript Code is as follows:

onCancelbuttonsessionitemidClick: function(button, e, eOpts) {
        var form = button.up('form').getForm(),
            formWindow = button.up('window'),
            session = form.getRecord(),
            store = this.getSessionsStore();

        if (form.isDirty()) {
             Ext.Msg.show({
               title:'Save Changes?',
               msg: 'Save Your Changes Before Exiting?',
               buttons: Ext.Msg.YESNOCANCEL,
                 fn: function(text) {
                     if (text == 'yes') {
                       form.updateRecord();
                       store.sync();
                       formWindow.destroy();
                     } else if (text === 'no') {
                       formWindow.destroy();
                     } else if (text === 'cancel') {
                        // do nothing
                     }
                 }
            });
        } else {
            formWindow.destroy();
        }
    },