extjs form submit using Ext.DIrect

Question

i want to submit a form using Ext.Direct and iam following all the guidelines present in the documentation still im getting this weird error

Error: Ext.data.Connection.setOptions(): No URL specified

this is the javascript code of my form

Ext.define('LOGIN.view.SignIn', {
    extend: 'Ext.form.Panel',
    alias: 'widget.signin',
    title: 'Sign-In',
    items: [{
        xtype: 'textfield',
        name: 'UserName',
        fieldLabel: 'UserName',
        allowBlank: 'false'
    }, {
        xtype: 'textfield',
        name: 'Password',
        fieldLabel: 'Password',
        allowBlank: 'false',
        inputType: 'password'
    }],
    buttons: [{
        text: 'Sign-In',
        handler: function () {
            this.up('form').getForm().submit({});
        }
    }, {
        text: 'Sign-Up -->',
        disabled: true,
        handler: function () {
            this.up('#LoginPanel').getLayout().setActiveItem(1);
        }
    }],
    api: {
        submit: LogIn.SignIn
    }
})

what should i change?

Answer 1

One thing to look out for here.

If you are using extdirectspring you will need to annotate your server side method with:

@ExtDirectMethod(ExtDirectMethodType.FORM_POST)
public ExtDirectFormPostResult doStuff(AddAttachmentRequest request)
{
    return null;
}

It is also mandatory to use ExtDirectFormPostResult aswell. If you don't it just wont work.

If you use a normaly extdirect method then no file data will be sent.

It also looks like the type you need on the other end is MultipartFile eg something like:

public class AddAttachmentRequest {

    private long id;
    private MultipartFile file;

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public MultipartFile getFile() {
        return file;
    }

    public void setFile(MultipartFile file) {
        this.file = file;
    }
}

Answer 2

I found out the answer digging into the framework.
I need to use the following code and define the api in the constructor because I guess this particular intialConfig isn't automatically taken

Here is the code

Ext.define('LOGIN.view.SignIn', {
    extend: 'Ext.form.Panel',
    alias: 'widget.signin',
    title: 'Sign-In',
    constructor: function (config) {
        Ext.applyIf(config, {
            // defaults for configs that should be passed along to the Basic form constructor go here
            api: {
                submit:LogIn.SignIn
            }
        });
        this.callParent(arguments);
    },
    items: [{
        xtype: 'textfield',
        name: 'UserName',
        fieldLabel: 'UserName',
        allowBlank: 'false'
    }, {
        xtype: 'textfield',
        name: 'Password',
        fieldLabel: 'Password',
        allowBlank: 'false',
        inputType: 'password'
    }],
    buttons: [{
        text: 'Sign-In',
        handler: function () {
            this.up('form').getForm().submit();
        }
    },
        {
            text: 'Sign-Up -->',
            disabled: true,
            handler: function () {
                this.up('#LoginPanel').getLayout().setActiveItem(1);
            }
        }]
})