How to submit a form in the store under ExtJs?

Question

Is there a way to submit the form to create an object in the repository in ExtJs 4?

It seems strange to me that the grid is completely built around the mechanism of the store, and I see no obvious way to connect the form to the store. But I most likely just missed something.

Answer 1

You can add an instance of the model to the repository after submitting the form using this code:

onSaveClick: function() { var iForm = this.getFormPanel().getForm(), iValues = iForm.getValues(), iStore = this.getTasksStore(); iStore.add( iValues ); }, 

This is in the MVC controller, so this is the controller.

To edit the model, you can “bind” the form to the model instance using loadRecord :

 iFormPanel.loadRecord( this.selection ); 

Then you can update the model instance using updateRecord() :

 iFormPanel.getForm().updateRecord(); 

Just for fun (and how it might help someone), it looks like the following code:

 onSaveClick: function() { var iForm = this.getFormPanel().getForm(), iRecord = iForm.getRecord(), iValues = iForm.getValues(); iRecord.set ( iValues ); }, 

If your store has autoSync: true . The update (or creation) will be called through the configured proxy. If there is no autoSync, you will have to synchronize the repository manually.

Answer 2

You can subclass Ext.form.action.Action to provide load / save operations for the form to be executed in the Store. The only problem is that somehow there is no “official” way to select any custom Action in Ext.form.Basic, so I would suggest an unofficial override:

 Ext.define('Ext.form.Advanced', { override: 'Ext.form.Basic', submit: function(options) { var me = this, action; options = options || {}; action = options.submitAction || me.submitAction; if ( action ) { return me.doAction(action, options); } else { return me.callParent(arguments); } }, load: function(options) { var me = this, action; options = options || {}; action = options.loadAction || me.loadAction; if ( action ) { return me.doAction(action, options); } else { return me.callParent(arguments); } } }); 

And, having created the necessary actions, you can use them in the form panel:

 Ext.define('My.form.Panel', { extend: 'Ext.form.Panel', requires: [ 'Ext.form.Advanced' ], loadAction: 'My.load.Action', submitAction: 'My.submit.Action', ... }); 

There are other ways and shortcuts.