Sencha form submittion using controller in sencha touch 2.3

Question

I have a sencha application where I am submitting a form. I added a listener to my submit button tab event and there submitted the form using ajax.

All I want here is to submit the form now using the controller.How can I proceed?

Answer 1

You can:

Ext.define('Myapp.view.Form', {
    extend: 'Ext.form.FormPanel',
    xtype: 'my-form',

    config: {
        items: [
            {
                xtype: 'textfield'
                name: 'field1'
            }, {
                xtype: 'textfield',
                name: 'field2'
            }, {
                xtype: 'button',
                text: 'submit',
                handler: function() {
                    var form = this.getParent();
                    var values = form.getValues();
                    form.fireEvent('submitForm', values);
                }
        ]
};

..

Ext.define('Myapp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            myForm: 'my-form'
        },

        control: {
            myForm: {
                submitForm: 'submitFn'
            }
        }
    },

    submitFn: function(values) {
        console.log(values);
    }
};

Hope it helps-

Answer 2

You can do it like this-

View:

Ext.define('Myapp.view.Form', {
    extend: 'Ext.form.FormPanel',
    xtype: 'my-form',

    config: {
        items: [
            {
                xtype: 'textfield'
                name: 'field1'
            }, {
                xtype: 'textfield',
                name: 'field2'
            }, {
                xtype: 'button',
                text: 'submit',
                action: 'submitForm'
        ]
};

Controller:

Ext.define('Myapp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            myForm : 'my-form',
            btnFormSubmit: 'my-form button[action=submitForm]'
        },

        control: {
            btnFormSubmit: {
                tap: 'onBtnFormSubmitTap'
            }
        }
    }, 

    onBtnFormSubmitTap: function() {
        var myForm = this.getMyForm();
        var values = myForm.getValues();
        myForm.Submit();
        console.log(values);
    }
};

You can find more help on submit method, to see the myForm.Submit() options: http://docs.sencha.com/touch/2.3.0/#!/api/Ext.form.Panel-method-submit