PDA

View Full Version : ST 2.2 -> 2.3 Form Panel and Date Fields



Turonah
10 Oct 2013, 3:42 AM
Here's the setup - I have a form panel with a date picker field, but the date picked is displayed in the user's preferred format (could be 12/25/2013, or 25th Dec 2013, or any other valid format).

In ST 2.2, forms submitted these fields based on the Ext value (the date object), which was then url encoded resulting in a constant format of '2013-12-25T00:00:00'.

ST 2.3 has severely broken this, and I can't find a way around it. Forms now submit the date field's element value, which is just the text version of the date in the user's format. The beforesubmit event passes the form values, but changing these has no effect on the POST values, even though adding callback functions to the form options (also passed to beforesubmit) works.

Rather than having to look up the user's preferred format server-side in order to parse the date appropriately, I would like to have the date submit in a consistent format - is this possible? Any pointers?

Turonah
10 Oct 2013, 7:42 AM
Found one approach that works so far, though it seems far from ideal ...

I stuck this in the form listeners:


beforesubmit: {
order: 'before',
fn: function ( me, formValues, options ) {
// Fix date values
var dateValues = {};
for ( var value in formValues ) {
if ( Ext.isDate(formValues[value]) ) {
// Append '_raw' so the value doesn't get written over
dateValues[value + '_raw'] = Ext.Date.format(formValues[value], 'Y-m-d H:i:s');
}
}
Ext.apply(options, {
params: Ext.apply(options.params || {}, dateValues),
success: successCallback,
failure: failureCallback
});
}
}


Any other ideas are welcome, though!

Kurt001
12 Oct 2013, 4:16 AM
If you are using PhoneGap you could use
Globalization

trevorcox
26 Oct 2013, 5:35 PM
I resolved this by monkey patching Sencha Touch so that it would allow a component to format the field value differently for serialization:

Ext.Element.serializeForm = function(form) {
var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements,
hasSubmit = false,
encoder = encodeURIComponent,
data = '',
eLen = fElements.length,
element, name, type, options, hasValue, e,
o, oLen, opt;

for (e = 0; e < eLen; e++) {
element = fElements[e];
name = element.name;
type = element.type;
options = element.options;

if (/*!element.disabled &&*/ name) {
if (/select-(one|multiple)/i.test(type)) {
oLen = options.length;
for (o = 0; o < oLen; o++) {
opt = options[o];
if (opt.selected) {
hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified;
data += Ext.String.format('{0}={1}&', encoder(name), encoder(hasValue ? opt.value : opt.text));
}
}
} else if (!(/file|undefined|reset|button/i.test(type))) {
if (!(/radio|checkbox/i.test(type) && !element.checked) && !(type == 'submit' && hasSubmit)) {

// allow component to provide different string for serialization, e.g. for datetimepicker
var value = element.value,
fieldEl = Ext.fly(element).up('.x-field',4),
cmp;
if(fieldEl && (cmp = Ext.getCmp(fieldEl.id)) && cmp.getSerializeValue)
value = cmp.getSerializeValue();
//console.log(value);

data += encoder(name) + '=' + encoder(value) + '&';
hasSubmit = /submit/i.test(type);
}
}
}
}
return data.substr(0, data.length - 1);
};

Then in the Date field component:

getSerializeValue: function() {
return ISODateString(this.getValue());
},

trevorcox
27 Oct 2013, 12:49 PM
This is part of a bigger issue that affects all field types:

http://www.sencha.com/forum/showthread.php?273099

DonM
24 Mar 2014, 5:25 AM
Thanks for the work around. I can't believe they didn't fix date fields in 2.3.1 or that they broke it that badly in the first place.