Extjs form submit

Question

I searched hours and hours for a solution but can't find one. I want to submit something to a php api function. it looks like this:

 /*global Ext:false */

Ext.onReady(function () 
{

var i = 0;
var form = Ext.create('Ext.form.Panel', {

         title: 'base_entity_id',
    bodyPadding: 5,
    width: 350,

     defaultType: 'textfield',
    items: [{
        fieldLabel: 'base_entity_id',
        name: 'first',
        allowBlank: false
    }],
     buttons: [{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true,
        //only enabled once the form is valid
        disabled: true,
        handler: function() {
            var form = this.up('form').getForm();
          }
    }],

    })

var tabs = Ext.create('Ext.tab.Panel', 
{
    renderTo: 'tabs',
    id: 'tabs',
    itemId: 'tabs',
    fullscreen: true,
    renderTo: document.body,

    items: 
    [
        {
            title: 'Home',
            margin: 40,
            items: [form],

        },
        {
        title: 'Results',
        itemId: 'Results',
         listeners: 
            {
                activate: function (tab) 
                    {
                        if(i == 0)
                            {
                                    var panel = Ext.create('Ext.tab.Panel', 
                                    {
                                        id: 'tabs2',
                                        width: window,
                                        height: window,
                                        renderTo: document.body,
                                    items: 
                                        [
                                            {
                                                title: '1',
                                                itemId: '1',
                                                closable: true,
                                                html: '10329u9iwsfoiahfahfosaofhasohflhsalkfhoihoi3riwoifhoiashfkhasofhosahfsahfahsfosafoisaiohfaoishfoihsaoifasoifsaifhsaoifasoihfoiahsfoihasfoihasoifoisfoihsafoihasfoiasoihasfoihaoifhaoihfoiahfoiaoaffoafoiafsaoafohaoh'
                                            },
                                            {
                                                title: '2',
                                                itemId: '2',
                                                closable: true,
                                            }
                                        ]
                                                            })
                                            tab.add(panel);
                                            tab.doLayout();
                                            i = 1;
                                    }
                            }
                    }
    }]

})  

});

But when i'm submitting i get no response, can someone help me with this? I dont know what the next steps are...

Answer 1

I have a simple application done with Ext JS/PHP and the following code worked for me:

myFormPanel.getForm().submit({
    clientValidation: true,
    url: 'updateConsignment.php',
    params: {
        id: myFormPanel.getForm().getValues().first
    },
    success: function(form, action) {
       Ext.Msg.alert('Success', action.result.msg);
    },
    failure: function(form, action) {
        switch (action.failureType) {
            case Ext.form.Action.CLIENT_INVALID:
                Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                break;
            case Ext.form.Action.CONNECT_FAILURE:
                Ext.Msg.alert('Failure', 'Ajax communication failed');
                break;
            case Ext.form.Action.SERVER_INVALID:
               Ext.Msg.alert('Failure', action.result.msg);
       }
    }
});

Source: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.BasicForm-method-submit

Answer 2

Well, you have set no URL for your form, and the submit button doesn't have the submit method so I'm not really sure how this was supposed to work.

You will need to add the url config to your form:

Ext.create('Ext.form.Panel', {
    title: 'base_entity_id',
    method: 'POST',
    url: 'myBackEnd.php' // Or whatever destination you are using for your backend.
...
});

Also, I saw that you are using formbind: true and later checking if the form was valid, one action renders the other unnecessary, so choose one, there is no need for both!

Add this your button handler:

form.submit({
    params: {
        id: form.getForm().getValues().first
    },
    success: function(form, action) {
        Ext.Msg.alert('Success', 'Your form was submitted successfully');
    },
    failure: function(form, action) {
        Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');
    }
});

Then you should check for $_POST['id']

For more information on form methods and configurations check this doc: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.Basic