PDA

View Full Version : 3.0 broke form fields (emptyText)



mschwartz
21 Apr 2009, 9:23 AM
A form field's emptyText is being submitted to the server. The docs document this behaviour.

This is wrong behaviour for emptyText and I think it is worth fixing in 3.0.

It's text to be displayed if the field is empty, it has nothing to do with the value of the field in any way shape or form.

What is the 3.x way to submit a form where the values are the actual values?

Example:



var form = new Ext.form.FormPanel({
items: [
{
xtype: 'textfield',
name: 'mytext',
value: '',
emptyText: 'Please enter some text for myText'
}
});

...

// submit button
function onClick() {
var f = form.getForm();
f.submit({
url: ...,
success: function() {
...
}
});
}
f.submit is sending 'mytext=Please enter some text for myText' to the server if no text is entered in the field. I specified the value as '' and that's what it should send.

Makes absolutely no sense to me why it should be this way.

EDIT: I tested this with 2.x and it is the same behaviour and edited my post to reflect my thoughts.

mschwartz
21 Apr 2009, 10:59 AM
A strategy that would fix this and likely provide many other benefits...

Ext already figures out if a form is multipart or has a file input field and calls doFormUpload(). If not, it calls seializeForm().

A look at doFormUpload() reveals some interesting logic that appends hidden fields to the form in the DOM before posting it via hidden iframe. Nice.

Use the same trick in serializeForm(). You know it's not an upload or multipart. So create a form element or use the existing one, loop through the Ext form (not the DOM one) and call getValue() on all the fields, append hidden field to this form for each one, and submit that.

You can do similar inside doFormUpload().



The serialization will be 100% slower, say, but who cares?

jay@moduscreate.com
21 Apr 2009, 11:48 AM
Ext 2.x always submitted empty text ;)

hell, i think it stemmed from 1.x- if i can recall correctly.

That said, this has been bubbled up to the core team and will be left as/is

mschwartz
21 Apr 2009, 1:09 PM
The reason I never saw this is most of my forms (over 1.5 years of programming Ext) I've serialized my own forms (except a few with file upload) and use Ext.Ajax.request directly.

The few cases I have emptyText, I probably have allowBlank: false, too.

mjlecomte
21 Apr 2009, 6:34 PM
There's some old threads this topic you may or may not have found.

I looked briefly into it wondering if there'd be an easy way to do setValues or something for any fields that value matched the emptyText to make those null.

I don't much care for current behavior.

mschwartz
22 Apr 2009, 6:50 AM
Condor:

See attached image to see what your override looks like.

FF3.0.8 windows

jay@moduscreate.com
22 Apr 2009, 6:54 AM
just an FYI;

http://extjs.com/forum/showthread.php?p=320240#post320240

mschwartz
22 Apr 2009, 6:55 AM
I see there's discussion about this going on in the premium forums.

The strategy I suggested in a previous post should work.

You use the existing form or create a new hidden one and temporarily replace the form fields with hidden fields with the same names and Ext.Field getValue() for the values. For all field types except file upload - those you use the existing DOM nodes or move the existing DOM nodes to the new form.

The benefit of calling getValue() is huge. The Ext (and custom) fields are not DOM elements, they are wonderful javascript OO classes/objects. getValue() can do all kinds of things like convert a Date() into a timestamp or format it, a time field consisting of 3 spinner input fields can combine the hours, minutes, seconds into a single int value, and so on.

mschwartz
22 Apr 2009, 6:56 AM
just an FYI;

http://extjs.com/forum/showthread.php?p=320240#post320240

I'm not a premium member so I can't post in that thread. Or I would :)

Maye some moderator can move it or merge with this or something.

Condor
22 Apr 2009, 7:06 AM
I forgot to mention that you also need some extra CSS:

<style type="text/css">
.x-field-empty-text {
color: gray;
padding: 3px 3px 0;
position: absolute;
left: -10000px;
top: -10000px;
visibility: hidden;
}
</style>

ps. I did need to make a small change in the focus logic for IE6/7 (see thread (http://www.extjs.com/forum/showthread.php?p=320226#post320226)). TriggerField still doesn't behave 100% on IE6/7...

mschwartz
22 Apr 2009, 7:41 AM
It can be done.

Tested in FF3.0.8. Didn't test with a form with a fileupload in it.

Could be improved to save all values and restore them, calling getValue() for every item not a fileupload.



Ext.override(Ext.form.Action.Submit, {
run : function(){
var o = this.options;
var method = this.getMethod();
var isGet = method == 'GET';
if(o.clientValidation === false || this.form.isValid()){
var values = [];
this.form.items.each(function(item) {
if (item.originalValue !== undefined && item.emptyText !== undefined && item.el.dom.value === item.emptyText) {
values.push({ dom: item.el.dom, val: item.emptyText });
item.el.dom.value = item.getValue();
}
});
Ext.Ajax.request(Ext.apply(this.createCallback(o), {
form:this.form.el.dom,
url:this.getUrl(isGet),
method: method,
headers: o.headers,
params:!isGet ? this.getParams() : null,
isUpload: this.form.fileUpload
}));
for (var i=0, len=values.length; i<len; i++) {
values[i].dom.value = values[i].val;
}
}else if (o.clientValidation !== false){ // client validation failed
this.failureType = Ext.form.Action.CLIENT_INVALID;
this.form.afterAction(this, false);
}
}
});

azbok
25 Jul 2009, 7:39 PM
I just recently wrote this and then searched the forums and found this thread, so I figure I may as well post it because it's the same exact topic, not sending the emptyText!

This is just a straight up helper right off the form, used however you like.



Ext.override(Ext.form.BasicForm, {
getChangedValues : function() {
var changed_values = {};

this.items.each(function(f){
var val = f.getValue();
if( f.isDirty() ) {
if ( (typeof(f.valueNotFoundText) != "undefined") && (f.valueNotFoundText != val)
|| (typeof(f.emptyText) != "undefined") && (f.emptyText != val) )
{
changed_values[f.getName()] = f.getValue();
}
}
});

return changed_values;
}
});

dearsina
27 Feb 2010, 8:15 AM
mschwartz/azbok, do either of you have a similar solution for DirectSubmit (as opposed to tranditional Submit)? I'm not experienced enough to "translate" either solution unfortunately, would be great if you had some pointers. I'm really annoyed at this emptyText issue! Thanks!