Adding new object to grid

Question

I am trying to add a new record to existing grid in extjs 6 classic toolkit.

I will paste my code bellow, but first to explain what the problem is. I use getCmp and getStore to fetch grid and store which will be used. With Ext.ComponentQuery.query I get values from each field in the form to be added to the grid.

console.log(values) shows the values

Here is what I have so far:

getValuesForSave : function() {

    var grid = Ext.getCmp('cataloguegrid');
    var store = Ext.getStore('cataloguegridstore'); 
    var model = store.model.create({});

    var form = Ext.ComponentQuery.query("#basicDataPanel")[1];  
    var values = form.getValues();

    console.log(values);
    grid.getStore(model).insert(0, values);  

    Ext.MessageBox.show({
        title : 'Saving data!',
        msg : 'Data successfully saved!',
        buttons : Ext.MessageBox.OK,
        icon : Ext.Msg.INFO
    });     
},

I get no errors and a new row gets added to the grid, but the row is empty, it contains no data. What changes do I need to make to be able to add an object to a grid?

Answer 1

Got it working. My problem was I did not set the "name" in form view to be the same as the "name" of items in form model. Changed that to match and it worked.

getValuesForSave : function() {

var grid = Ext.getCmp('cataloguegrid');

var form = Ext.ComponentQuery.query("#basicDataPanel")[1];  
var values = form.getValues();

console.log(values);

grid.getStore().insert(0, values);   

Ext.MessageBox.show({
    title : 'Saving data!',
    msg : 'Data successfully saved!',
    buttons : Ext.MessageBox.OK,
    icon : Ext.Msg.INFO
});         
},