Forms 如何使用ExtJs下的存储提交表单?

Forms 如何使用ExtJs下的存储提交表单?,forms,extjs,extjs4,store,Forms,Extjs,Extjs4,Store,有没有办法让表单提交在ExtJS4下的存储中创建对象 我觉得奇怪的是,网格完全是围绕存储机制构建的,我看不到将表单插入存储的明显方式。但我很可能只是错过了什么 您可以在表单提交时使用以下代码将模型实例添加到存储: onSaveClick: function() { var iForm = this.getFormPanel().getForm(), iValues = iForm.getValues(), iStore

有没有办法让表单提交在ExtJS4下的存储中创建对象


我觉得奇怪的是,网格完全是围绕存储机制构建的,我看不到将表单插入存储的明显方式。但我很可能只是错过了什么

您可以在表单提交时使用以下代码将模型实例添加到存储:

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

    iStore.add( iValues );
},
这是在MVC控制器中,因此
这是控制器

对于模型编辑,可以使用
loadRecord
将表单“绑定”到模型实例:

iFormPanel.loadRecord( this.selection );
iFormPanel.getForm().updateRecord();
然后可以使用
updateRecord()
更新模型实例:

只是为了好玩(可能会有帮助),它类似于以下代码:

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

    iRecord.set ( iValues );        
},

如果您的商店是has
autoSync:true
。将通过配置的代理进行更新(或创建)调用。如果没有自动同步,则必须手动同步存储。

您可以将Ext.form.action.action子类化,为要在存储上执行的表单提供加载/保存操作。唯一的问题是在Ext.form.Basic中没有“官方”方法来选择任何非标准操作,因此我建议使用非官方覆盖:

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',

    ...
});

还有其他的方法和快捷方式。

什么是
这个
,对于
这个.getStore()
,你首先如何将一个存储与
这个
关联?哦,对不起,所有这些代码都在MVC控制器中,所以
这个
指的是控制器(现在编辑的TaskStore)将是其存储配置之一。但它不那么重要-您可以对
VAR
使用相同的概念,您只需要
表单面板和
存储
的实例。也许提供您的代码,我们将从那里获取。好的,我跟着您。还是不为我工作。我正在尝试你的第一种方法,但什么都没有发生。这是我到目前为止得到的,嗯。。。代码看起来不错,如果执行
console.log(store.add(values)),会发生什么我很可能只是密度太高,但是这个覆盖如何帮助您将表单连接到存储?这会让你比仅仅给onButtonClick事件分配一个函数有什么好处呢?表单使用动作来加载和提交数据。通过使用标准提交以外的操作,您可以更改数据处理逻辑,而无需将其与表单紧密耦合。当你的商店发生变化时会发生什么?您希望在哪里处理行动细节?已经有一个动作了,它只是不能满足你在那个特殊情况下的需要。对我来说,用从存储区加载数据并将其保存到存储区的操作替换该操作非常有意义。我尝试了这种方法,将loadAction和submitAction定义为面板上的属性似乎不会将它们传递到操作面板。我可以把它作为提交调用的一个选项,但在面板上不能。请注意,对于那些在这个问题上结结巴巴的人,在更加熟悉ExtJS之后,我决定尝试将horn存储转换为表单是一个非常糟糕的主意。它增加了很多复杂度,但收获很少。考虑自己的警告。我有同样的初步想法,但过了一会儿,意识到表单真的只是一个记录,不需要一个商店。然而,我发现奇怪的是,我必须调用
updateRecord
将表单值应用于底层记录模型。我想这是自动的。