PDA

View Full Version : [CLOSED] Modal Window IE7



cwolcott
May 29, 2013, 4:36 PM
In Chrome, IE8 and IE9 this displays correctly. The window is shown model after pressing the Parameters button.

In IE7 though the Window is also model.

One other point if I remove
<form runat="server"> the it displays properly in IE7.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">

protected void ClickShowParams(object sender, DirectEventArgs e)
{
ReportParameters.Show();
}
</script>
<!DOCTYPE html >
<html>
<head runat="server">
<title>Window issue IE7</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Bin>
<ext:Window ID="ReportParameters" runat="server" ClientIDMode="Static" Hidden="true"
Title="Report Parameters" Width="260" Layout="FitLayout" Resizable="false" Border="false"
Modal="true" Icon="ReportEdit">
<Buttons>
<ext:Button runat="server" Text="Cancel" Handler="App.ReportParameters.hide();" />
</Buttons>
</ext:Window>
</Bin>
<Items>
<ext:Panel runat="server" Region="Center" Title="Center">
<Items>
<ext:Button runat="server" Text="Parameters" OnDirectClick="ClickShowParams" />
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>


How can I get this to display properly with the form tag?
I am using Rev 5123 (May 08).

cwolcott
May 29, 2013, 4:42 PM
Close the thread. I found my issue based on a thread I posted in Nov 2012, I hate getting old!!!

Window modal IE7 (Nov 2012) (http://forums.ext.net/showthread.php?21990-CLOSED-Window-modal-IE7)

Vladimir
May 29, 2013, 4:44 PM
Please review the following thread
http://forums.ext.net/showthread.php?19972-CLOSED-Modal-window-and-form-tag

Vladimir
May 29, 2013, 4:45 PM
You can force rendering to document.body by using


DefaultRenderTo="Body"

cwolcott
May 29, 2013, 4:55 PM
You can force rendering to document.body by using


DefaultRenderTo="Body"


How would I use the above suggestion?

Vladimir
May 29, 2013, 4:58 PM
It is window property, just apply to the window

cwolcott
May 29, 2013, 5:12 PM
It is window property, just apply to the window

Sorry I didn't notice that it was a property. Ok that allowed it to display properly, but I now have an issue with controls in the form note being populated when in IE7 with this additional property on the window. Let me expand my example, be back in a couple minutes.

cwolcott
May 29, 2013, 6:24 PM
Ok, click on the populate button to bring up the modal window that displays Report Parameters.

The window is now modal in IE7 because we added the DefaultRenderTo="Body" property.

If you are in Chrome, IE8 or IE9 you can select predefined time periods and the start and end date fields are populated.
If you are in IE7 the start and end date fields are not populated.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">

protected void ClickShowParams(object sender, DirectEventArgs e)
{
ReportParameters.Show();
}
</script>
<!DOCTYPE html >
<html>
<head runat="server">
<title>Window issue IE7</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Bin>
<ext:Window ID="ReportParameters" runat="server" ClientIDMode="Static" Hidden="true"
Title="Report Parameters" Width="260" Layout="FitLayout" Resizable="false" Border="false"
Modal="true" Icon="ReportEdit" DefaultRenderTo="Body">
<Items>
<ext:FormPanel runat="server" BodyPadding="10" BodyStyle="background: transparent; padding: 5ps 10px 10px;">
<FieldDefaults LabelAlign="Right" LabelWidth="70" />
<HtmlBin>
<script type="text/javascript">

var onKeyUp = function () {
var me = this,
v = me.getValue(),
field;

if (me.startDateField) {
field = Ext.getCmp(me.startDateField);
field.setMaxValue(v);
me.dateRangeMax = v;
}
else if (me.endDateField) {
field = Ext.getCmp(me.endDateField);
field.setMinValue(v);
me.dateRangeMin = v;
}
App.PredefinedTimePeriod.setValue('ZZ');
field.validate();
}

var onChange = function () {

if (!this.lockChange) {
App.PredefinedTimePeriod.setValue('ZZ');
this.validate();
}
}

var setTimePeriod = function (newValue, oldValue) {

if (newValue.value == null) return;

var tp = newValue.value[0];
var cp = newValue.value[1];
var today = new Date();

switch (tp) {

case 'Z':
return;
break;

case 'T':
switch (cp) {
case 'C':
var s = today;
var e = today;
break;
default:
}
break;

case 'M':
switch (cp) {
case 'P':
with (today) {
setMonth(getMonth() - 1);
setDate(1);
}
var s = Ext.Date.getFirstDateOfMonth(today);
var e = Ext.Date.getLastDateOfMonth(s);
break;
case 'C':
var s = Ext.Date.getFirstDateOfMonth(today);
var e = Ext.Date.getLastDateOfMonth(s);
break;
default:
}
break;

case 'Q':
var q = Math.floor((today.getMonth() / 3)) + 1;
switch (cp) {
case 'P':
var s = new Date(today.getFullYear(), (q * 3 - 5) - 1, 1);
var e = Ext.Date.getLastDateOfMonth(new Date(today.getFullYear(), (q * 3 - 3) - 1, 1));
break;

case 'C':
var s = new Date(today.getFullYear(), (q * 3 - 2) - 1, 1);
var e = Ext.Date.getLastDateOfMonth(new Date(today.getFullYear(), (q * 3) - 1, 1));
break;
default:
}
break;

case 'Y':
switch (cp) {
case 'P':
var s = new Date(today.getFullYear() - 1, 1 - 1, 1);
var e = Ext.Date.getLastDateOfMonth(new Date(today.getFullYear() - 1, 12 - 1, 1));
break;

case 'C':
var s = new Date(today.getFullYear(), 1 - 1, 1);
var e = Ext.Date.getLastDateOfMonth(new Date(today.getFullYear(), 12 - 1, 1));
break;
default:
}
break;
}

var sd = App.StartDate;
var ed = App.EndDate;

sd.lockChange = true;
ed.lockChange = true;
sd.setValue(s);
ed.setValue(e);
sd.lockChange = false;
ed.lockChange = false;

}

</script>
</HtmlBin>
<Items>
<ext:Container runat="server" StyleSpec="text-align: center; padding-top: 15px;">
<Items>
<ext:Label runat="server" Text="Select the time period for the report." />
</Items>
</ext:Container>
<ext:ComboBox ID="PredefinedTimePeriod" runat="server" ClientIDMode="Static" FieldLabel="Predefined"
Editable="false">
<Items>
<ext:ListItem Text="Today" Value="TC" />
<ext:ListItem Text="Month - Previous" Value="MP" />
<ext:ListItem Text="Month - Current" Value="MC" />
<ext:ListItem Text="Quarter - Previous" Value="QP" />
<ext:ListItem Text="Quarter - Current" Value="QC" />
<ext:ListItem Text="Year - Previous" Value="YP" />
<ext:ListItem Text="Year - Current" Value="YC" />
<ext:ListItem Text="Custom" Value="ZZ" />
</Items>
<Listeners>
<Change Fn="setTimePeriod" />
</Listeners>
</ext:ComboBox>
<ext:DateField ID="StartDate" runat="server" ClientIDMode="Static" Vtype="daterange"
FieldLabel="Start" EndDateField="EndDate" EnableKeyEvents="true" Format="m/dd/Y">
<Listeners>
<Change Fn="onChange" />
<KeyUp Fn="onKeyUp" />
</Listeners>
</ext:DateField>
<ext:DateField ID="EndDate" runat="server" ClientIDMode="Static" Vtype="daterange"
FieldLabel="End" StartDateField="StartDate" EnableKeyEvents="true" Format="m/dd/Y">
<Listeners>
<Change Fn="onChange" />
<KeyUp Fn="onKeyUp" />
</Listeners>
</ext:DateField>
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button runat="server" Text="Cancel" Handler="App.ReportParameters.hide();" />
</Buttons>
</ext:Window>
</Bin>
<Items>
<ext:Panel runat="server" Region="Center" Title="Center">
<Items>
<ext:Button runat="server" Text="Parameters" OnDirectClick="ClickShowParams" />
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Daniil
May 30, 2013, 4:56 AM
Please replace:

var tp = newValue.value[0];
var cp = newValue.value[1];
with

var tp = newValue.value.substring(0,1);
var cp = newValue.value.substring(1,2);

It appears that IE7 can't "index" a string.

P.S. Please keep one topic per thread. The initial topic looks closed.

cwolcott
May 30, 2013, 1:34 PM
Sorry. I thought the controls not populating correctly in IE7 vs IE8 might be related to how the window was being display inside a form tag. It was just related to IE7 issues. Everything is good, for now.

Please close the thread.

Daniil
May 30, 2013, 1:39 PM
I thought the controls not populating correctly in IE7 vs IE8 might be related to how the window was being display inside a form tag.


No problem. I didn't think you could think this way. I thought you just forgot about a need to start a new thread. So... never mind.