Let me start off by saying that I love the ExtJS framework and it has been a pleasure to learn it over the last few days. It is probably the most professional JavaScript framework I’ve seen, thus the reason I wanted to add it to my latest app. The documentation is very thorough and it’s very easy to learn.

However, I’ve spent most of my day (when not taking care of kids and doing school work) trying to figure out why a simple form I’ve created doesn’t submit. The thing that really had me perplexed is that almost the exact same code worked for another form on another page. It was frustrating because I just knew it was something I was doing wrong.

Perhaps the most frustrating part about it was the fact that it was a bug in the framework itself. From what I’ve since found by researching on their forums, the bug was reported a few versions ago. There’s a work-around and I’ll get to that in a bit, but I want everyone to see the code.

var dbPanel = new Ext.form.FormPanel({
		id     			: 'dbPanel',
		name   			: 'dbPanel',
		height 			: 'auto',
		width  			: 'auto',
		standardSubmit 	        : true,
		layout 			: 'form',
		method 			: 'POST',
	        url    			: 'db_verify.php',
		border			: false,
		bbar			: tb,
		keys			: [{
		     key	: Ext.EventObject.ENTER,
		     fn 	: verifyDB
		}]
});

This is the code that doesn’t work. It’s a basic form and it should POST data to the db_verify.php page. The “standardSubmit : true” sets the form panel to use the old standard submit instead of Ajax. Here is another example that works:

var loginPanel = new Ext.form.FormPanel({
		id			: "loginPanel",
		height		: 'auto',
		width		: 'auto',
		layout		: 'form',
		border 		: false,
		standardSubmit	: true,
		url		: 'login.php',
		method		: 'POST',
		bbar		: tb,
		keys 		: [{
		   	key: Ext.EventObject.ENTER,
			fn : doSubmit
		}]
	});

There’s very little different in these two instances of FormPanel. The only difference I could find was that the first one doesn’t work and the second one does. In fact, I changed just about every option three times or more just to make sure I wasn’t missing anything. Everything I did gave me the same result. The page would refresh to itself and my form data would just disappear.

The eventual fix for the problem is to manually set the DOM action for the form when the handler is fired. So, for the first code listing, my handler went from looking like this:

var verifyDB = function(){
     dbPanel.getForm().submit();
};

To looking like this:

var verifyDB = function(){
    dbPanel.getForm().getEl().dom.action = 'db_verify.php';
    dbPanel.getForm().submit();
};

The first handler worked perfectly well with the other form submit. For some reason, it just seems to randomly decide it isn’t going to work for this scenario. It’s an easy fixed, but when you are trying to learn a new framework it’s not good to deal with a bug like this during your first few days.