1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    10
    Vote Rating
    0
    sir_holmes is on a distinguished road

      0  

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

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


    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:
    Code:
    
    
    Code:
    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:
    Code:
    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
    Last edited by mitchellsimoens; 9 Mar 2012 at 12:02 PM. Reason: added [CODE] tags

  2. 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:

    Code:
    var form = searchFormButton.up('formpanel');
    Then you should be able to do the getForm() and submit()

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
    var form = searchFormButton.up('formpanel');
    Then you should be able to do the getForm() and submit()
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    10
    Vote Rating
    0
    sir_holmes is on a distinguished road

      0  

    Thumbs up


    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!

Thread Participants: 1

Tags for this Thread