Submitting a form in MVC not working (empty field values)

[sir_holmes]

Hey,I hope you can help me out with some knowledge on forms in ExtJS - I just don't get it working (and I'm pretty new to ExtJS).

In an MVC structure I have a view containing a form 'searchForm' with several fields, the submit button is handled via a controller. Everything works fine so far, except submitting values of the fields to the server. When I hit the submit button, all actions are done but the variables are empty.

I don't get the solution... hope you can help me! Thanks a lot!!


View:

Ext.define('carabids.view.tools.SearchForm', {    extend: 'Ext.form.Panel',
    alias : 'widget.searchForm',

    renderTo: Ext.get('contentBox'),
    title: langForm[0],
    autoHeight: true,
    width: 940,
    bodyPadding: 10,
    defaults: {
        anchor: '100%',
        labelWidth: 100
    },
    items: [
        {
                               xtype: 'textfield',
                               name: 'searchGenus',
                               id: 'searchGenus',
                               fieldLabel: langForm[2],
                               margin: '5 0 5 0',
                               submitValue: true
                           },
....
buttons: [
        {
            text   : langForm[17],
            id: 'searchFormExecButton',
            action: 'search'
        }
....

Controller:

Ext.define('carabids.controller.Tools', {
    extend: 'Ext.app.Controller',

    stores: [
             'DispAbilities',
             'Ranges',
             'Regions'
    ],


    models: [
             'DispAbilities',
             'Ranges',
             'Regions'
    ],

    views: [
            'tools.SearchForm'
    ],

    init: function() {
        this.control({
            'searchForm button[action=search]': {
                click: this.execSearch
            }
        });
    },

    execSearch: function(searchFormButton, event) {
        console.log('search executed');
        console.log(Ext.widget('searchForm').getValues());

        Ext.widget('searchForm').getForm().submit({
            url: 'serverside/controller.php',
            method: 'GET',
            params: {
                sn: sn,
                sid: sid,
                action: 'searchDatabase'
            },
            waitMsg: 'performing search...',
            waitTitle: 'Status',
            success: function(form, action) {
                Ext.Msg.alert('Success', action.result.msg);
            },
            failure: function(form, action) {
                switch (action.failureType) {
                    case Ext.form.action.Action.CONNECT_FAILURE:
                        Ext.Msg.alert('Failure', 'AJAX communication failed');
                        break;
                    case Ext.form.action.Action.SERVER_INVALID:
                        Ext.Msg.alert('Failure', action.result.msg);
                        break;
               }
            }
        });
    }
});

Console:
Attachment 32559

[mitchellsimoens]

When you use Ext.widget you are creating a new instance of the form not using the existing one.In your execSearch you need to resolve the form like this:

var form = searchFormButton.up('formpanel');

Then you should be able to do the getForm() and submit()

[sir_holmes]

Great, it works... changed the code to

execSearch: function(searchFormButton, event) {
console.log('search executed');

searchFormButton.up('searchForm').getForm().submit({
url: 'serverside/controller.php',

...

Thank you for help!