How do I submit a form using a store under ExtJs?

问题

Is there a way to have a form submit create an object in a store under ExtJs 4?

It seems strange to me that the grid is built completely around the store mechanism and I see no obvious way to plug a form into a store. But I am most likely just missing something.

回答1:

You can add a model instance to a store upon form submit using this code:

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

    iStore.add( iValues );
},

This is within an MVC controller, so this is the controller.

For model editing, you can 'bind' a form to a model instance using loadRecord:

iFormPanel.loadRecord( this.selection );

You can then update the model instance using updateRecord():

iFormPanel.getForm().updateRecord();

Just for fun (and as it might help some), it is similar to the following code:

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

    iRecord.set ( iValues );        
},

If your store is has autoSync: true. An Update (or Create) call will be made via the configured proxy. If there's no autoSync, you'll have to sync your store manually.

回答2:

You can subclass Ext.form.action.Action to provide load/save actions for a Form to be performed on a Store. The only gotcha is that somehow there's no "official" way to select any non-standard Action in Ext.form.Basic, so I'd 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 Actions you need, you could then use them in a 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 though.

来源：https://stackoverflow.com/questions/11835729/how-do-i-submit-a-form-using-a-store-under-extjs