Question

I’m using ExtJS to pop up a window with a simple edit form, but on pressing the submit button, no XHR call is made and I get a this.form.el.dom is undefined error reported in the console.

Here’s my code:

var myNameSpace = new function(){
    var editForm, editWindow;

    this.init = function(){

        Ext.Ajax.request({
            url: '/server/action.php',
            success: function(result){
                console.log('ajax is working ok');  // I get this
            }
        });

        editForm = new Ext.form.FormPanel({
            width:450,
            autoHeight: true,
            header : false,
            items:  [{
                name: 'color', 
                fieldLabel: 'Color', 
                xtype: 'textfield', 
                value: 'blue'
            }],
            buttons: [{
                text:"Submit",
                scope: this,  // tried without this, too
                handler: function(){
                    // editForm.getForm().getValues() returns normal values
                    editForm.getForm().submit({
                        url: '/server/action.php',
                        success: function(form, action) {
                            console.log('Yes! Success!');  // I don't get this
                        },
                        failure: function(form, action) {
                            console.log('failed.');  // I don't get this
                        }
                    });
                    editWindow.close();  // works
                    console.log('the form is now closed'); // I get this
                }
            }]
        });

        editWindow = new Ext.Window(
        {
            title:'Enter your color',
            autoWidth: true,
            autoHeight: true,
            layout: 'fit',
            modal: true,
            items: editForm,
            closeAction: 'hide'
        });
        editWindow.show();
    };

};

Ext.onReady(function () {
    myNameSpace.init();
});

Any light on the subject will be greatly appreciated and profusely upvoted.

Answer 1

I am going to say that the issue is asynchonous nature of form submital. You form closes before the response is received from the Ajax submit event. Try moving your editWindow.close() line inside the success processing block.