PDA

View Full Version : [CLOSED] Blank values of DateField not submitted



ndotis
Aug 16, 2016, 9:55 PM
Hello

I am using Ext.net version 4.1.
"DateField" is not submitting the blank values,
when we blank out the value on a "DateField", call the "form.getForm().GetFieldValues(false)", the "datefield" is returning the old value instead of empty string.

What's the work around?

Advise..

fabricio.murta
Aug 16, 2016, 11:31 PM
Hello @ndotis!

Please provide a sample reproducing your issue so we can see the issue and be able to provide you advice.

ndotis
Aug 16, 2016, 11:53 PM
Here is the working sample, on form load "Datefield" displays the current date, clear the value (click the 'X') and then click the button, the alert displays the old value instead of blank value.

testform1.aspx


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestForm1.aspx.vb" Inherits="LPAIndexIntranet.TestForm1" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>

<ext:ResourceManager Theme="Crisp" runat="server">
</ext:ResourceManager>


<ext:FormPanel ID="testFrm" Layout="AnchorLayout" runat="server">
<Items>
<ext:FieldContainer ID="_fdc" Layout="HBoxLayout" runat="server">
<Items>
<ext:DateField ID="fld1" Name="firstFld" runat="server" />
<ext:Button
ID="Button2"
runat="server"
Text="Submit">
<DirectEvents>
<Click OnEvent="SaveData">
<ExtraParams>
<ext:Parameter
Name="values"
Value="#{testFrm}.getForm().getValues()"
Mode="Raw"
Encode="true" />
</ExtraParams>
</Click>
</DirectEvents>

</ext:Button>
</Items>

</ext:FieldContainer>
</Items>
</ext:FormPanel>

</body>
</html>


TestForm1.aspx.vb


Imports Ext.Net

Public Class TestForm1
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.fld1.Text = DateTime.Now.ToShortDateString
End Sub

<DirectMethod()>
Protected Sub SaveData(sender As Object, e As DirectEventArgs)
Dim values As Dictionary(Of String, String) = JSON.Deserialize(Of Dictionary(Of String, String))(e.ExtraParams("values"))
Dim sb As New StringBuilder()

For Each value As KeyValuePair(Of String, String) In values
sb.AppendFormat("{0} = {1}<br />", value.Key, value.Value)
Next

Ext.Net.X.Msg.Alert("Values", sb.ToString()).Show()
End Sub


End Class

fabricio.murta
Aug 17, 2016, 2:58 AM
Hello!

The full DateField component handles System.DateTime date format so it can't just be a partial or empty date.

To attain the behavior you want you'll need to use a TextField with a date picker trigger. Something like this:



<ext:TextField ID="fld1" Name="firstFld" runat="server" BaseCls="x-form-field-date">
<Triggers>
<ext:FieldTrigger Handler="App.dateMenu1.showBy(this);" Icon="Date" />
</Triggers>
</ext:TextField>
<ext:DateMenu runat="server" ID="dateMenu1">
<Listeners>
<Select Handler="App.fld1.setValue(Ext.Date.format(date,'d/m/Y'));" />
</Listeners>
</ext:DateMenu>


I hope this helps!

ndotis
Aug 17, 2016, 3:48 PM
No, it doesn't help.

I have around 100 DateFields on my form, so I need to define a "DateMenu" for 100 fields? there should be a better solution like modify the form "getValues" function to include the null values too ?

Advise..

also, the FULL "DateField" component takes the blank value if I explicity set the values using a "Clear" trigger, but I don't want to do this for all 100 fields, there should be a workaround for this bug !!



<ext:DateField ID="rowNTPDateFld" Name="ROWNTPDate" runat="server" FieldLabel="ROW Date">
<Listeners>
<TriggerClick Handler="#{rowNTPDateFld}.setValue(null);this.getTrigger(0) .hide();" />
<FocusEnter Handler="this.getTrigger(0)[this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" QTip="Remove..." Hidden="true"/>
</Triggers>
</ext:DateField>

fabricio.murta
Aug 17, 2016, 8:23 PM
Hello @ndotis!

Sorry it does not help you at all, but you can use the same date menu on all the hundred fields you have out there. Handling the component differently will require changes to the code and page, unfortunately.

ndotis
Aug 17, 2016, 9:12 PM
O.K, if I can use the same "DateMenu" for all the fields how to set the "select" handler relatively, the below select handler is hard-coded to update the "fld1"

help...



<ext:DateMenu runat="server" ID="dateMenu1">
<Listeners>
<Select Handler="App.fld1.setValue(Ext.Date.format(date,'d/m/Y'));" />
</Listeners>
</ext:DateMenu>

fabricio.murta
Aug 18, 2016, 2:28 AM
Hello again!

You can attain such behavior just by syncing what is selected in the field with what is in the picker. The picker's field will always be the component the picker is "aligned" to (side effect of the showBy() call).

So, in order to clear the golfed code in the handlers, I've written them in a separate object-container and bound them to the menu. Here's the code of the handlers:



<script type="text/javascript">
var datePickerHandler = {
dateFormat: 'd/m/Y', // watch out, it should be in the supported format you're using!
show: function (item) {
var presetDate = Ext.Date.parse(item.alignTarget.value, datePickerHandler.dateFormat);

if (presetDate == null) {
presetDate = Ext.Date.parse(Ext.Date.now(), 'U')
}

item.picker.selectedUpdate(presetDate);
},
select: function (item, date) {
var formattedDate = Ext.Date.format(date, datePickerHandler.dateFormat),
alignedComponent = item.container.component.alignTarget;

alignedComponent.setValue(formattedDate);
}
}
</script>


And here's how you use the handlers above with the date menu:



<ext:DateMenu runat="server" ID="dateMenu1">
<Listeners>
<Select Fn="datePickerHandler.select" />
<Show Fn="datePickerHandler.show" />
</Listeners>
</ext:DateMenu>


Notice I only changed this to reduce the amount of golfed code in the date menu listeners that would make things much harder to understand.

I am confident you can get your page working in fully with this approach!

ndotis
Aug 18, 2016, 5:40 PM
Looks good,
but since this is a "TextField" using as a date input field, I need to format the data and implement the date validation???

how the "FormatText" attribute works on a "TextField", can I use that to format the data to date format (mm/dd/yyyy)?
Is there a Vtype "Date" available or need I need to implement a custom validation?

Advise..

fabricio.murta
Aug 18, 2016, 9:59 PM
Hello @ndotis!

You'd need to implement a custom validation. But you can parse input dates as shown in the code above, using Ext.Date.parse() (http://docs.sencha.com/extjs/6.0.2-classic/Ext.Date.html#method-parse) and output using Ext.Date.format() (http://docs.sencha.com/extjs/6.0.2-classic/Ext.Date.html#method-format).

You might already know but its never too much to leave a reminder for our examples explorer containing validation sample approaches. A good starting point would be: Form fields - Validation - Custom VType (http://examples4.ext.net/#/Form/Validation/Custom_VType/).

Hope this helps!

ndotis
Aug 22, 2016, 10:53 PM
You can close the thread.
I prefer to implement the "FieldTrigger" rather than making the "TextField" behave as "DateField".

Here is my solution for the issue, might help others.


<ext:DateField ID="test1Fld" Name="testFld" runat="server" FieldLabel="Testing">
<Listeners>
<TriggerClick Handler="this.setValue(null);this.getTrigger(0).hide();" />
<FocusEnter Handler="this.getTrigger(0)[(this.readOnly || this.getRawValue().toString().length == 0) ? 'hide' : 'show']();" />
<FocusLeave Handler="this.getTrigger(0).hide();" />
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" QTip="Remove..." Hidden="true" />
</Triggers>
</ext:DateField>

fabricio.murta
Aug 23, 2016, 4:14 AM
Hello @ndotis!

Glad you found a solution that better suited you! I really thought the solution you posted above wouldn't do as by the looks of it, just erasing the contents of the date field won't do (erasing with backspace/del key, for instance).

Thanks for sharing the solution that best worked for you too! I'm sure this is going to be useful for people with similar problems!