ExtJS 4.2.1 does not submit form using standardSubmit

1
votes

I'm trying to submit a form via post method which opens up a url in new window using the standardSubmit in extjs 4.2.1

Error is thrown by ext-all-debug.js in getFields function

getFields: function() {
    return this.monitor.getItems();
},

Uncaught TypeError: Cannot call method 'getItems' of null

Here the monitor object is shown as null.

Clicking on a Link opens a message window which contains the form. On 'Yes' click, the form has to submitted with a new window opened.

My Form is: 

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        items: [
        {
            xtype: 'form',
            flex: 1,
            itemId: 'importForm',
            layout: {
                align: 'center',
                type: 'vbox'
            },
            bodyPadding: 20,
            standardSubmit: true,
            items: [
            {
                xtype: 'hiddenfield',
                itemId: 'user_id',
                fieldLabel: 'Label',
                name: 'user_id'
            },
            {
                xtype: 'label',
                itemId: 'formLabel',
                padding: 5,
                text: 'My Label'
            },
            {
                xtype: 'container',
                margin: '10 0 0 0',
                layout: {
                    align: 'middle',
                    pack: 'center',
                    type: 'hbox'
                },
                items: [
                {
                    xtype: 'button',
                    itemId: 'btnImport',
                    margin: '20 0 0 0',
                    width: 75,
                    text: 'Yes'
                },
                {
                    xtype: 'button',
                    cls: 'btn-no',
                    itemId: 'btnCancel',
                    margin: '0 0 0 10',
                    width: 75,
                    text: 'No'
                }]
            }]
        }]
    });

The code to submit the form is:

me.form.getForm().doAction('standardsubmit',{
    target : '_blank',
    method : 'POST',
    standardSubmit:true,
    url : 'http://www.mysite.com'
});

The exactly same code works in Extjs 4.1.3 but shows error in 4.2.1

Is this a bug or is something wrong with my code???

2
extjsextjs4.2
have you tried doing regular formPanel.submit method ? – dbrin

2 Answers

8
votes

Found the cause of error. The code below the form submission had an statement that closed the window, which threw the exception.

me.form.getForm().doAction('standardsubmit',{
    target : '_blank',
    method : 'POST',
    standardSubmit:true,
    url : 'http://www.mysite.com'
});
me.abstractcomponent.close(); <----- THIS CAUSED THE ERROR

The reason might be the window being immediately closed while the form is waiting/responding for some operation.

Adding setTimeout() event did the trick:

setTimeout(function(){me.abstractcomponent.close();},500);

Hope its useful to someone else too!!!

3
votes

This was helpful in determining the issue. The issue is that the form object is destroyed before the asynchronous request is started. The better way to handle this issue is to add your request handlers, so that the form could be destroyed as soon as response is returned. 

form.submit({
    success: function(form, action) {
      yourcomponent.close();//or destroy();
    },
    failure: function(form, action) {
        yourcomponent.close();//or destroy();
    }
});

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic