ExtJS How to compare form values to a selected record

Question

Start by saying I'm new to ExtJS, and have spent way too much time trying to figure out this one little piece. I am building a small grid to display 3 columns, with a button to add a new record, a button to delete the selected record, and a button to use the new record form to update the selected record. Right now I have the new and delete buttons working. The Update button calls the form and fills it with the selected record, but I am having trouble within the form's submit function to figure out if the current form data matches the selected record, to decide if it will update an existing record or make a new one. This has to be based off of what the user selected and not an individual column.

Here is the submit button where I am having trouble figuring out the way to reference it. I have tried numerous ways from stackoverflow and sencha forums.

buttons: [
        {
            text: 'Submit',
            handler: function(){

                if ( /* The field values match the selected record */) {
                    //update the existing record

                } else {
                    //Add new record
                    Ext.getCmp('testGrid').store.add(testForm.getValues());
                }

                Ext.getCmp('testGrid').getView().refresh();
                testForm.hide();
                testForm.reset();
            }
        }
    ]

And here are the buttons calling the form to show.

items: [
            {
                //New button calls the Add Record form to pass inputs to the store
                text: 'New',
                scope: this,
                handler: function(){
                    testForm.show();
                }
            },{
                text: 'Update',
                scope: this,
                handler: function(){
                    //WIP
                    var selection = Ext.getCmp('testGrid').getView().getSelectionModel().getSelection()[0];
                    if (selection) {
                        testForm.show();
                        testForm.loadRecord(selection);
                    }

                }
            }//Delete button is irrelevant 
        ]

The store is testStore The grid is testGrid and the form is testForm

I know it may be stupid but I have become stumped on how to proceed with this. Any help is greatly appreciated.

Answer 1

Your record should have an unique identifier. (https://docs.sencha.com/extjs/7.0.0/classic/Ext.data.Model.html ) Search for the property idProperty in Ext.data.Model. The default identifier is 'id'. Every record in your store should have an unique id that you can use to check for records in your grid

Your code edited

            buttons: [{
text: 'Submit',
handler: function() {
    //get record via form
    //get grid
    if (grid.getStore().findRecord('id', record.get('id'))) {
        //update the existing record

    } else {
        //Add new record
        Ext.getCmp('testGrid').store.add(testForm.getValues());
    }

    Ext.getCmp('testGrid').getView().refresh();
    testForm.hide();
    testForm.reset();
}
  }]

I created a sencha fiddle with a working example for you if you want to test it.

https://fiddle.sencha.com/#view/editor&fiddle/31fr

I hope this helps you!

Answer 2

Exists several ways to resolve your problem. 1) Add to form some flag before open. For example - testForm.caseType = 'edit'/'add' or testForm.isEdit = true/false; And when you submit form you have to check if(testForm.caseType == 'edit') { store.findRecord('keyParamName', keyParamValue) and update/replace it } 2) Other way when you open form, your should remove record and after submit always add new (but in this case you may lose data if you close form without submit). 3) If you open form as modal window - your grid will stay with selection, so you can after submit get record ..... getSelection()[0] again and update it.