Ext.form.action.DirectSubmit does not work for my form

[impactmedia]

Hi !

I wanted to use Ext.form.action.DirectSubmit for my form. When I use the code I posted here the Ext direct action is not submitted. The form is perfoming a standard submit.

I specified the api in my form and set formHandler to true in my remoting api. The form looks pretty the same thank in the direct form example.

What did I miss?

Thank you!

I have the following REMOTING API configuration:

Ext.ns('Direct.api');
Direct.api.REMOTING_API = {"url":"\/index.php?direct","type":"remoting","actions":{"IndexController":[{"name":"create","len":1},{"name":"read","len":1},{"name":"update","len":1,"formHandler" : true},{"name":"destroy","len":1},{"name":"test","len":1},{"name":"index","len":1},{"name":"load","len":1}]},"namespace":"Direct.api"};

Here is my form:

Ext.define('My.view.ImpSchema.Form', {
    extend: 'Ext.form.Panel',
    layout: {
        type: 'anchor'
    },
    anchor: '100%',
    bodyPadding: 10,
    defaults: {anchor: '100%'},
    api: {
        load: Direct.api.IndexController.read,
        submit: Direct.api.IndexController.update
    },
    paramOrder: ['uid', 'foo'],
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {

            items: [
                {
                    xtype: 'fieldset',
                    layout: {
                        type: 'fit'
                    },
                    title: 'Schema Information',
                    items: [
                        {
                            xtype: 'hiddenfield',
                            name: 'id',
                            fieldLabel: 'Id',
                            anchor: '100%'
                        },
                        {
                            xtype: 'textfield',
                            name: 'name',
                            fieldLabel: 'Name',
                            anchor: '100%'
                        },
                        {
                            xtype: 'textfield',
                            name: 'db_system',
                            fieldLabel: 'Database system',
                            anchor: '100%'
                        },
                        {
                            xtype: 'textfield',
                            name: 'db_host',
                            fieldLabel: 'Database host',
                            anchor: '100%'
                        },
                        {
                            xtype: 'textfield',
                            name: 'db_username',
                            fieldLabel: 'User name',
                            anchor: '100%'
                        },
                        {
                            xtype: 'textfield',
                            inputType: 'password',
                            name: 'db_password',
                            fieldLabel: 'Password',
                            anchor: '100%'
                        },
                        {
                            xtype: 'numberfield',
                            name: 'db_port',
                            fieldLabel: 'Port',
                            anchor: '100%'
                        }
                    ]
                }
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    id: 'MySchemaToolbar',
                    dock: 'bottom',
                    items: [
                        {
                            xtype: 'button',
                            iconCls: 'icon-save',
                            text: 'Save',
                            handler: function() {
                                var record = me.getForm().getValues();
                                console.log(record);
                                console.log(me);

                                /* This works
                                Direct.api.IndexController.update(record, function(result, event) {
                                console.log(result);
                                console.log(event);
                                });
                                */

                                /* This does not work */
                                me.getForm().submit({
                                    params: {
                                        foo: 'bar',
                                        uid: 34
                                    }
                                });

                                var win = me.up('window')
                                if (Ext.isObject(win)) {
                                    win.hide();
                                }
                                
                            }
                        },
                        {
                            xtype: 'button',
                            iconCls: 'icon-cancel',
                            text: 'Cancel',
                            handler: function() {
                                me.getForm().reset();
                                var win = me.up('window')
                                if (Ext.isObject(win)) {
                                    win.hide();
                                }
                            }
                        }
                    ]
                }
            ]

        });

        me.callParent(arguments);
    }
});

[mitchellsimoens]

You need to specify the api within your constructor so that it gets applied when the form is created. The problem is that the two apis are returning undefined because the Direct API hasn't finished loading when this file is executed (Ext.define fires).