Question

When I execute the below code, i can see an exception in my chrome logged like:

Uncaught TypeError: Object [object Object] has no method ‘getEl’

var search = new Ext.form.Panel({
    renderTo: 'pan',
    title: 'Basic Panel',
    collapsible:true,
    width: 400,
    defaults: {width: 230},
    defaultType: 'textfield',
    bodyPadding: 10,
    //layout: 'form',
    frame:true,
    items: [{
            fieldLabel: 'Username',
            name: 'username',
            id: 'username',
            allowBlank:false
        },
        {
            fieldLabel: 'Password',
            name: 'password',
           inputType:'password',
            allowBlank:false
        },

        {
            fieldLabel: 'First Name',
            name: 'firstname',
           inputType:'text',
            allowBlank:false
        }, 
        {
            fieldLabel: 'Last Name',
            name: 'lastname',
           inputType:'text',
            allowBlank:false
        },
        {
            fieldLabel: 'E-Mail Address',
            name: 'email',
           vtype:'email',

           allowBlank:false
        },

        {
            fieldLabel: 'State',
            name: 'state',
           allowBlank:false
        },
        {
            fieldLabel: 'City',
            name: 'city',
           allowBlank:false
        }, 
       {
            fieldLabel: 'Country',
            name: 'country',
           allowBlank:false
        }, 
        {
            inputType: 'hidden',
            id: 'submitbutton',
            name: 'myhiddenbutton',
            value: 'hiddenvalue'
        }

    ],
    buttons: [{
        text: 'Submit',
        handler: function() {
            search.getForm().getEl().dom.action = 'FormServlet';
            search.getForm().getEl().dom.method = 'POST';
            search.getForm().submit();
        }
    }]

I have defined the servlet in the web.xml file which contains the name, class and url.

Please let me know how to resolve this issue.

Regards,

Answer 1

Don’t make it that complicated. I guess ExtJS overrides your settings or didn’t use them at all cause you didn’t used the appropriate config properties to set this.

Here are the API links for both

• method
• url

Here is your demo code extended with these

var search = new Ext.form.Panel({
    renderTo: 'pan',
    title: 'Basic Panel',
    collapsible:true,
    width: 400,
    defaults: {width: 230},
    defaultType: 'textfield',
    bodyPadding: 10,
    url: 'FormServlet', // you can fix a parameter like this : FormServlet?action=create
    action: 'POST',
    frame:true,
    items: [
         //....
    ],
    buttons: [{
        text: 'Submit',
        handler: function() {
            search.getForm().submit();
        }
    }]

Or do it this way to be more flexible

var search = new Ext.form.Panel({
    renderTo: 'pan',
    title: 'Basic Panel',
    collapsible:true,
    width: 400,
    defaults: {width: 230},
    defaultType: 'textfield',
    bodyPadding: 10,
    url: 'FormServlet', 
    action: 'POST',
    frame:true,
    items: [
         //....
    ],
    buttons: [{
        text: 'Submit',
        handler: function() {
            Ext.Ajax.request({
                url : 'FormServlet',
                method:'POST', 
                params : {
                    yourParam: Ext.encode(form.getValues())
                },
                scope : this,
                //method to call when the request is successful
                success : this.onLoginSuccess,
                //method to call when the request is a failure
                failure : this.onLoginFailure
            });
        }
    }]