Question

有没有办法让表单提交在ExtJs 4下的商店中创建一个对象？

我觉得奇怪的是网格是完全围绕商店机制构建的，我没有看到将表单插入商店的明显方法。但我很可能只是遗漏了一些东西。

Answer 1

您可以使用以下代码在表单提交时将模型实例添加到商店：

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

    iStore.add( iValues );
},

这是在MVC控制器中，因此this是控制器。

对于模型编辑，您可以使用loadRecord：

将表单“绑定”到模型实例

iFormPanel.loadRecord( this.selection );

然后，您可以使用updateRecord()更新模型实例：

iFormPanel.getForm().updateRecord();

只是为了好玩（因为它可能有所帮助），它类似于以下代码：

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

    iRecord.set ( iValues );        
},

如果您的商店有autoSync: true。将通过配置的代理进行更新（或创建）调用。如果没有autoSync，您必须手动同步商店。

Answer 2

您可以继承Ext.form.action.Action子类，以便为要在Store上执行的Form提供加载/保存操作。唯一的问题是，在某种程度上，在Ext.form.Basic中没有选择任何非标准Action的“官方”方法，所以我建议使用非正式的覆盖：

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);
        }
    }
});

并且，创建了您需要的操作后，您可以在表单面板中使用它们：

Ext.define('My.form.Panel', {
    extend: 'Ext.form.Panel',

    requires: [ 'Ext.form.Advanced' ],

    loadAction: 'My.load.Action',
    submitAction: 'My.submit.Action',

    ...
});

但是还有其他方法和捷径。

如何使用ExtJs下的商店提交表单？

2 个答案: