forms - ExtJsのストアを使用してフォームを送信するにはどうすればよいですか？

Question

フォーム送信でExtJs4の下のストアにオブジェクトを作成する方法はありますか？

グリッドがストアメカニズムの周りに完全に構​​築されていることは私には奇妙に思えます。フォームをストアに接続する明確な方法がわかりません。しかし、私はおそらく何かが足りないだけです。

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。Update (または Create) 呼び出しは、構成されたプロキシ経由で行われます。自動同期がない場合は、ストアを手動で同期する必要があります。

Answer 2

Ext.form.action.Action をサブクラス化して、Store で実行される Form の読み込み/保存アクションを提供できます。唯一の問題は、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',

    ...
});

ただし、他の方法とショートカットがあります。