javascriptajaxextjsextjs6extjs6-classic

How to pass the form element to Ext AJAX request


I have a problem with passing a form to an ExtJS6 AJAX request. The docs state:

form : Ext.dom.Element / HTMLElement / String

The form Element or the id of the form to pull parameters from.

Scope is not the problem, this references to Ext.form.Panel

My code is:

Ext.Ajax.request({
  scope: this,
  method: 'POST',
  url: 'someurl',
  form: this.getEl(),
  isUpload: true,
  success: this.someSuccessFunction
  failure: this.someFailureFunction
});

I have also tried this.getId(), this.getForm().getId() and this.

Whatever I try, I get this error:

Uncaught TypeError: form.submit is not a function

Does anyone know what is the problem with my code?


Solution

  • Ext.form.Panel does not contain form-tag. This feature is used in case of real html forms. Have a look the request of the following example: fiddle

    Ext.application({
    name: 'Fiddle',
    
    launch: function () {
        Ext.create('Ext.button.Button', {
            text: "Submit",
            renderTo: Ext.getBody(),
            handler: function () {
                Ext.Ajax.request({
                    url: 'user.json',
                    form: Ext.fly('userForm').dom,
                    success: function (response, opts) {
                        var obj = Ext.decode(response.responseText); // THIS IS A REAL HTML FORM
                        console.dir(obj);
                    },
    
                    failure: function (response, opts) {
                        console.log('server-side failure with status code ' + response.status);
                    }
                });
    
            }
        })
    }
    });