ExtJS Use same window for editing and adding a record

Question

I have my ExtJS 4.2.1 MVC Application.

Inside my app, I have a grid with a toolbar. The toolbar has 2 buttons, "Add New" and "Edit Record".

Inside my Controller.js I listen for my toolbar buttons click events.

 this.control({
         'toolbar #newRecord': {
                        click: this.addRecord
                    },
    'toolbar #editRecord': {
                        click: this.editRecord
                    },
    '[xtype=editshiftcode] button[action=commit]': {
            click: this.saveRecord // here I have to add or edit
        }
}

Then I have Window that I want to use for editing and adding records:

Ext.define('App.view.EditShiftCode', {
    extend: 'Ext.window.Window',
    alias: 'widget.editshiftcode',

    height: 250,
    width: 550,
    title: 'Add / Edit Shift',
    modal: true,
    resizable: false,
    layout: 'fit',
    glyph: Glyphs.PENCIL,
    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'container',
                //height: 175,
                layout: {
                    type: 'hbox',
                    align: 'strech'
                },
                items: [{
                    xtype: 'form',
                    bodyPadding: 10,
                    autoScroll: false,

                    itemId: 'editForm',
                    defaults: { // defaults are applied to items, not the container
                        allowBlank: false,
                        allowOnlyWhitespace: false,
                        msgTarget: 'side',
                        xtype: 'textfield'
                    },
                    items: [
                     {
                         xtype: 'textfield',
                         name: 'ShiftCode',
                         fieldLabel: 'Code'
                     },
                    {
                        xtype: 'textfield',
                        name: 'Description',
                        fieldLabel: 'Description'
                    },
                    {
                        xtype: 'hiddenfield',
                        name: 'ShiftType'
                    },
                    {
                        xtype: 'hiddenfield',
                        name: 'ShiftTypeId'
                    },

                    {
                        xtype: 'textfield',
                        name: 'Hours',
                        fieldLabel: 'Hours per Day'
                    },
                    {
                        xtype: 'colorcombo',
                        name: 'ColorHex',
                        fieldLabel: 'Color'
                    },
                    {
                        xtype: 'checkbox',
                        fieldLabel: 'Active',
                        name: 'IsActive',
                    }
                    ],
                }]
            }],
            buttons: [
                          {
                              text: 'OK',
                              action: 'commit',
                              glyph: Glyphs.SAVE
                          },
            {
                text: 'Cancel',
                action: 'reject',
                glyph: Glyphs.CANCEL
            }]
        });

        me.callParent(arguments);
    },

});

My editRecord function is:

editRecord: function (button, e, options) {

var me = this;
var window = Ext.create('App.view.EditShiftCode');
window.show();

},

My addRecord function is:

addRecord: function (button, e, options) {

var me = this;
var window = Ext.create('App.view.EditShiftCode');
window.show();

},

My saveRecord function is:

saveRecord: function (button, e, options) {

    // here i need to know what operation im going to perform.
    // if Im going to edit then I have to update my form record to my store record
    // if im going to add then I need to add a new item to my store.
}

Is this correct? To use the same function to perform 2 different actions? And if so, how can I know what action am I going to perform and how to do it?

Thanks

Answer 1

This way always worked for me:

1. User selects a record in the grid
2. User clicks "Edit record"
3. I use loadRecord to load the selected record in the form
4. When he clicks OK I call updateRecord
5. If user clicks "Add record" I create a new blank record and go to step 3
6. If he clicks OK after adding record, I just add the new record to the grid - you can easily know if the record is new or existing by checking phantom flag. So if record.phantom === true then it is new.