Jun 23, 2016, 1:35 PM
[FIXED] [#1349] [4.1.0] Date Field editor of label fails in IE
Hello everyone,
I ran into following issue:
If you have a label
and you are using a date field as an editor of this field
and this field is located near the right border of the browser window
then the editing will be forcibly finished by internet explorer when the "calendar" appears.
This issue is IE specific (The version of IE is 11). In all other browsers all works OK.
The issue can be easily reproduced using following code:
http://screencast.com/t/JZ6wo53YT
It looks like because of the calendar control doesn't fit into a browser window it forces some layout renew that forcibly finishes editing. This is a guess, I haven't tracked the events and stack trace.
I've tried to replace the toolbar fill to something else, change the layout to another, tune the position using CSS, the issue appears every time when the control is near the right border of the browser window and no matter how it got there.
I ran into following issue:
If you have a label
and you are using a date field as an editor of this field
and this field is located near the right border of the browser window
then the editing will be forcibly finished by internet explorer when the "calendar" appears.
This issue is IE specific (The version of IE is 11). In all other browsers all works OK.
The issue can be easily reproduced using following code:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Globalization" %>
<script runat="server" language="c#">
protected void Page_Load(object sender, EventArgs e)
{
OrderDateLabel.Text = DateTime.Today.ToString("d", CultureInfo.CurrentCulture);
OrderTimelabel.Text = DateTime.Now.ToString("T", CultureInfo.CurrentCulture);
}
[DirectMethod]
public static void UpdateDate(DateTime date)
{
//do something with the date
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>IE issue</title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" DirectMethodNamespace="IS" />
<ext:Viewport runat="server" Layout="fit" >
<Items>
<ext:Container runat="server" Layout="hbox">
<Items>
<ext:ToolbarFill runat="server"/>
<ext:Label ID="OrderDateLabel" runat="server" StyleSpec="margin-right:5px;">
<Editor>
<ext:Editor ID="OrderDateEditor" runat="server" Shadow="false">
<Field>
<ext:DateField ID="OrderDateDateField" runat="server" Cls="x-form-field-editor" Width="120" RemoveClearTrigger="True" />
</Field>
<Listeners>
<StartEdit Handler="this.field.setValue(Ext.Date.parse(App.OrderDateLabel.getText(), App.OrderDateLabel.editor.field.format));"></StartEdit>
<Complete Handler="IS.UpdateDate(this.field.value);
App.OrderDateLabel.setText(Ext.util.Format.date(this.field.value, App.OrderDateLabel.editor.field.format));
App.OrderTimelabel.setText('00:00:00');
console.log('editing completed because of layout issue');">
</Complete>
</Listeners>
</ext:Editor>
</Editor>
</ext:Label>
<ext:Label runat="server" ID="OrderTimelabel" StyleSpec="margin-right:5px;"></ext:Label>
</Items>
</ext:Container>
</Items>
</ext:Viewport>
</form>
</body>
</html>http://screencast.com/t/JZ6wo53YT
It looks like because of the calendar control doesn't fit into a browser window it forces some layout renew that forcibly finishes editing. This is a guess, I haven't tracked the events and stack trace.
I've tried to replace the toolbar fill to something else, change the layout to another, tune the position using CSS, the issue appears every time when the control is near the right border of the browser window and no matter how it got there.
Last edited by fabricio.murta; Jan 05, 2017 at 11:21 PM.
