store values from form to grid

I have create a add record form in extjs which stores user entered data into grid.

Well , if found following method to get form values from formPanel

var formPanel = new Ext.form.FormPanel({...});
var form = formPanel.getForm();
var firstName = form.findField('firstname').getValue();

but i want to covert all the user input value into JSON and want to store into Grid panel and want to send it to the server also. but using findField i have to manually create the array and then need to encode it into JSON , so i开发者_开发问答s there any alternate way to directly read values from form and convert it into JSON and store it into Grid Panel.

When you say "want to store in the GridPanel" would you be updating an existing record in the Grid's store or would you be inserting a new one or both? (depending on whether its add or update probably?)

For such situations, BasicForm (var form in your snippet above) provides updateRecord( Record record ) method.

So your steps would be -

var record = Record.create(...) // in case of insert

OR

var record = //obtain record from grid.getStore() in case of update

Then,

formPanel.getForm().updateRecord(record); //update the passed record with values from the form

Followed by committing the record back to the store-

grid.getStore().add(record); //in case of insert
grid.getStore().commitChanges(); //incase of update

Reference - Ext.form.BasicForm , Ext.data.Record

Define your record type -

MyRecordType = Ext.data.Record.create(['id', 'field1', 'field2']);

var myrec = new MyrecordType();

Now pass myrec to updateRecord as mentioned above.