PDA

View Full Version : How to send data from ExtJS to CGI?



Sigma
13 Aug 2009, 1:23 PM
Hi there,

Sorry for being such a noob, I just have no idea how to do this. I have a button and a textarea in a FormPanel, and I want the button to trigger the textarea value to be sent to a cgi script. I know how to do this in plain html:
<form action="cgi path" method="POST"> ... But I have no idea how to do this with ExtJS. Is there a page or something describing how to do this? (I couldn't find anything in the tutorials section). Thank you so much.

(again sorry for being a newb, im very new to extjs and web development in general)

Animal
13 Aug 2009, 1:29 PM
http://extjs.com/deploy/dev/docs/

FormPanel.getForm

Sigma
14 Aug 2009, 8:28 AM
Hi Animal,

Thanks for helping. I tried the following code in the button's handler function:
fpName.getForm().submit({
method: 'POST',
url: 'cgi path'
});
It's not working though, I'm getting a JS error "XML Tag Mismatch". Anyone know what's wrong? Thanks.

Animal
14 Aug 2009, 9:27 AM
What does your JSON return packet look like?

Sigma
14 Aug 2009, 10:07 AM
My mistake, it was a silly error in the cgi script. Firebug tells me the script is receiving the submit which is good, I'm just not sure how to display the script in a new window. This is the perl cgi:
my $incoming = param('mainfield');
print <<EOF;
<html>
<head>
<title>test cgi</title>
</head>
<body>
$incoming
</body>
</html>
EOF
exit;
How do I make it so that when the user submits, the page opens in a new window?
I tried doing this:
fpName.getForm().on('submit', function() { window.open('cgi path'); } ); before submitting, but it doesn't work.

Animal
14 Aug 2009, 10:50 AM
I'm shocked.

And stunned.

Shocked and stunned.

Did you not evcen glance at this? http://extjs.com/deploy/dev/docs/?class=Ext.form.Action.Submit

Sigma
14 Aug 2009, 11:51 AM
I'm confused...

Looking at that doc page, I'm guessing that I have to do something with the success() function. But it looks like that's used for something different. I want to handoff the data to the other file (like an html <form> does), not get the data back to Ext and have Ext do something with it. I may very well be completely wrong about this, and you may be facepalming again. I just want to know the easiest way to have an Ext form behave exactly like an html <form>.

Animal
14 Aug 2009, 11:56 AM
You have to return what it tells you to return: JSON.

Warebear
14 Aug 2009, 12:04 PM
ok this will probably make most advanced programmers vomit....LOL but here is some code that I used to submit parameters to a PHP page to export an XML document.



buttons:[{
text: 'Export Report',
minWidth: 75,
type: 'submit',
standardSubmit: true,
handler: function(){
window.open("export_report.php?startdt="+document.getElementById("startdt").value+"&enddt="+document.getElementById("enddt").value+"&repvalue="+document.getElementById("repvalue").value+"&workgroupID="+document.getElementById("workgroupID").value+"&supID="+document.getElementById("supID").value+"&empID="+document.getElementById("empID").value,"Export","width=200px,height=150px");
}}]
What you're probably looking for is the:
standardSubmit: true
handler: function(){window.open("url?variables","window name","window parameters");

There is probably a WAY prettier way, and in doing some research on newer code you can use the params: to feed information this way as well.

Hope this helps.

*please note this is OLD code, and reading more into the API documentation, etc. there are other options, but this may at least get you started in the right direction.


Nowadays I use something like:


text: 'Save',
handler: function(){
formName.getForm().getEl().dom.action = '../url/page.php';
formName.getForm().getEL().dom.method = 'POST';
formName.getForm().submit();
}

Animal
14 Aug 2009, 12:08 PM
What does the standardSubmit config of Ext.Button do? (hint: nothing) You need a LinkButton so that the user gets some kind of clue that there's going to be navigation. It's only polite to use an <a> element to do that.

OP probably wants standardSubmit on the form, but that's not good. No page replacement. Update the page dynamically! It's the new way.

Warebear
14 Aug 2009, 12:12 PM
Yeah wanted to throw in the new code because the old code is where I stumbled across like 4 threads, 2 google searches and mixed and matched. Then after API reading and such I use the new code listed at the bottom.

:D


Sometimes looking at my old code even makes me cry...LOL

Sigma
14 Aug 2009, 1:10 PM
Thanks for helping guys, I might change to a dynamic submit later, but for now I just used the basic html submit style. This tutorial: http://extjs.com/learn/Tutorial:Basic_Form_Submit told me basically everything I needed to know.