Add record to the store and display on the grid - extjs

Question

I have AddRecord method, that should add the record to the store and display on the grid that record.
I've put the form inside the window, and that is fine.
I was looking at the documentation but I got lost a bit.
There is a fiddle created.
Here is the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2tuf
AddRecord: function (grid, rowId, record) {
Ext.create('Ext.window.Window', {
title: "Add Person",
height: 200,
width: 400,
closeAction: 'hide',
closable: true,
items: [{
xtype:'form',
defaultType: 'textfield',
layout: 'anchor',
items: [{
fieldLabel: 'First Name',
name: 'First Name',
type: 'String',
allowBlank: false
}, {
fieldLabel: 'Last Name',
name: 'Last Name',
type: 'String',
allowBlank: false
}, ],
buttons: [{
text: 'Add',
formBind: true,
disabled: true,
handler: function () {
var record = Ext.getStore().getAt(rowId);
var store = grid.getStore('store.Personal')
var form = this.up('form').grid.getStore();
if (form.isValid()) {
form.add({
success: function (record) {
var store = grid.getStore('store.Personal')
store.add(record);
},
})
}
},
}, {
text: 'Close', handler: function () {
this.up('window').close();
}
}],
}]
}).show();
}
});

Answer 1

You were almost there, You made a little confusion about grid.getStore(), as it just
Returns the store associated with this Panel.
and how you are getting your form values, I think you were trying to do something like this:
buttons: [{
text: 'Add',
formBind: true,
disabled: true,
handler: function(button) {
let formValues = this.up('form').getForm().getValues(); //get the form Values
let form = this.up('form').getForm(); //get the form itself
var store = grid.getStore(); //get Store of your grid
if (form.isValid()) {
//add the formvalues to store
store.add(formValues);
}
},
}]
I also made a Fiddle