Ext2.0 formPanel using browser submit not function

[levinso]

hi everyone,

i have an app that need the browser submit method.
i currently follow the guide to add the config into the formpanel as following:

var myForm = new Ext.form.FormPanel({

                 id: 'loginForm', 

                 onSubmit: Ext.emptyFn,

                 submit: function() {

                    this.getEl().dom.submit();

                 },

                 method: 'post',

                 url: 'userAuth.aspx?ac=login',

                 timeout: 15, //15sec

                 trackResetOnLoad: true,

                 bodyStyle: 'padding:0px',

                 labelAlign: 'right',

                 width: 400,

                 autoHeight: true,

                 frame: true,

                 title: 'Ext 2.0 Form Test',

                 items: [lname, lpass]

            }); 

when a submit event occur by clicking the button:

            var SubmitAction = function(){

                if(loginForm.form.isValid()){

                    loginForm.form.submit();    

                }

            } 

it would cause problems..
i trace with firebug and figure out that the form dose not have the action attr at all..
how can i solve this problem?

thanks

[Animal]

The docs don't match the class any more (Ext 2.0), but then the new class makes it difficult to specify a browser submit.

I think Jack needs to explcitly support browser submits rather than use that kludge of setting properties through the config option.

The problem is that the configs are shared.

And where is the built-in FormPanel.submit?

FormPanel.getEl() returns the container Element.

FormPanel.getForm() returns the Form.

[levinso]

i workaround of it and solve the problem as adding the attr of 'action':

                 onSubmit: Ext.emptyFn,

                 submit: function() {

                    this.getEl().dom.setAttribute('action', 'userAuth.aspx?ac=login');

                    this.getEl().dom.submit();

                 }, 

[ghendricks]

I am having similar difficulties. Using your method above, I was finally able to get it to submit, but it is ignoring the baseParams. I have several extra parameters to pass. Perhaps I should try a hidden form field?

But I agree is Animal, this is klunky. I expect (and the docs lead me to believe this) that I should be able to set the following :

    var planform = new Ext.FormPanel({

        onSumbit: Ext.emptyFn,

        submit: function(){

            alert('submitted');

            this.getEl().dom.setAttribute('action', 'tr_new_plan.cgi?action=Add');

            this.getEl().dom.submit();

        },

        url: 'tr_new_plan.cgi',

        baseParams: {action: 'Add'},

        fileUpload: true,

        labelAlign: 'top',

        bodyStyle:'padding:5px 5px 0',

        width: 800,

        height: 500,

        items: [{

            layout:'column',

            items:[{

                columnWidth:.5,

                layout: 'form',

                items: [{

                    xtype:'textfield',

                    fieldLabel: 'Plan Name',

                    name: 'first',

                    anchor:'95%'

                }, typesBox]

            },{

                columnWidth:.5,

                layout: 'form',

                items: [productsBox,versionsBox]

            }]

       }]

       buttons: [{ text: 'submit', type: 'submit' }]

}); 

And have the submit method on the formpanels form called, but instead I have to go though a separate handler on the button to even submit.

[chidera]

Hi all,

My apologies...I am both an ExtJS and Javascript newbie....but, I'm NOT a programming newbie. Whatever the case, I'm COMPLETELY stumped on two counts:

• First, I have no idea how to get the FormPanel to submit a "normal" form post...even after reading post after post after post. I've tried TONS of different combinations of different solutions that apparently worked for others, but to no avail for me.
• Second, while I'd be happy to allow the form to be submitted the "ExtJS Way", I'm not exactly sure what that is or how to do it. If there are examples anywhere, they're hiding from me.

Here is my code as of this moment (keep in mind that I've tried a great variety of different tacks thus far and this is just what I had when I finally decided to post here):

		var loginForm = new Ext.form.FormPanel({
			id: 'loginForm',
			url: /auth/identity/login/',
//			method: 'POST',
			labelWidth: 75, // label settings here cascade unless overridden
			frame: true,
			title: 'Login',
			bodyStyle: 'padding: 5px 5px 0',
			width: 350,
			defaults: {width: 230},
			defaultType: 'textfield',
			items: [{
				fieldLabel: 'Username',
				name: 'username',
				allowBlank: false,
				maxLength: 32,
				value: ''
				, emptyText: 'username'
			}, {
				fieldLabel: 'Password',
				name: 'password',
				allowBlank: false,
				inputType: 'password',
				maxLength: 32
			}],
			buttons: [{
				text: 'Login',
				type: 'submit',
				handler: function() {
					loginForm.submit();
				}
			}],
			onSubmit: Ext.emptyFn,
			submit: function() {
				alert("'Bout to submit...");
				this.getEl().dom.setAttribute('action', 'userAuth.aspx?ac=login');
				this.getEl().dom.submit();
				alert("Done submitting...!");
			}
		});

		loginForm.render('loginForm');

If anyone sees anything or can direct me somewhere positive, I'd appreciate it.

Thanks in advance for your help.

Travis

[zipi]

if i understand correctly what you are trying to do, then you need this:

this.form.el.dom.submit()

instead of

this.getEl().dom.submit()

[Animal]

Yes, an Ext 2.0 FormPanel is not a subclass of BasicForm the way an Ext 1.* Form was. It contains a BasicForm, so to get at the DOM form, you'd use

myFormPanel.getForm().getEl()

There really needs to be a way to specify ajaxSubmit:false

[chidera]

Hi, Animal,

Thanks. It appears that the following should be used (for me ) instead of what's in the documentation:

			onSubmit: Ext.emptyFn,
			submit: function() {
				this.getForm().getEl().dom.setAttribute('method', 'POST');
				this.getForm().getEl().dom.setAttribute('action', 'myactionurl');
				this.getForm().getEl().dom.submit();
			}

I'm going to continue to use this until the actual release...which will contain some of your suggestions, I hope.