PDA

View Full Version : how to specify "action" in traditional form sumbit ?



garyng
25 Nov 2007, 9:21 PM
Hi,

I have been able to create a simple traditional form submit with the following:


var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
action: '/xxx',
fileUpload: true,
frame:true,
method: 'POST',
title: 'Upload Jasper Report',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.submit('xxx');
},

items: [
{
fieldLabel: 'File under',
name: 'file_under',
value: '/a',
allowBlank:false
},
{
fieldLabel: 'Report',
name: 'report',
inputType: 'file'
},
{
name:'send',
value: 'send',
width:50,
labelSeparator:'',
inputType: 'submit',
handler: function() {
this.ownerCt.getForm().submit('aaaaa')
}
}
]
});

But it seems that both the url: and action: tag doesn't change where the POST goes. It always goes to the source URL of the page.

BTW, how do I specify onChange/onFocus etc. to the fields created this way?

thanks for any help in advance.

santosh.rajan
25 Nov 2007, 10:35 PM
You have defined two submits!. See this example on a simple way to do it.
http://extjs.com/forum/showthread.php?p=87142#post87142

garyng
25 Nov 2007, 10:49 PM
That thread seems to be about JSON style submit which is not what I want, at the moment.

After some testing, I do notice that I have defined two submit YET not of the defined function fired. In fact, what seems to be happening is that using the 'inputType:submit', a click on that would unconditionally submit the form without invoking the function which I defined.

So the problem still remains : how do I change the <FORM action="?"> attribute or get the equivalent of it using the FormPanel.

garyng
26 Nov 2007, 12:16 AM
After some experiement, the following works :



var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'/a',
fileUpload: true,
frame:true,
title: 'Upload Jasper Report',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
onSubmit: function() {
var x = simple.getComponent('file_under');
if (x) {
this.el.dom.setAttribute('action', x.getValue());
} else {
this.el.dom.setAttribute('action', this.url);
}
},

items: [
{
fieldLabel: 'File under',
name: 'file_under',
id: 'file_under',
value: '/a',
listeners: {
'change': function() {
}
},
allowBlank:false
},
{
fieldLabel: 'Report',
name: 'report',
inputType: 'file'
},
{
name:'send',
value: 'send',
width:50,
labelSeparator:'',
inputType: 'submit'
}
]
});

simple.render(document.body);


But it still has some very undesirable behaviour :

the 'this' in the onSumbit function is not referring to the FormPanel but something else so I have to use 'simple' instead to get to the components. not a problem here but still means uncesssary namespace pollution.

I tried also to access the container from insider the field 'this.ownerCt' and set the url there. But this again for some reason doesn't work. It can see simple.url and even set it to a new value but when I tried to access it in the onSubmit, this.url still refers to the old value.

For the moment, I have to live with this though it seems that traditional style form submit is not something extjs wants to support anyway. Hope this thread would help others who need this as I saw lots of threads asking/talking about the same issue.