[CLOSED] Modal Window IE7

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Modal Window IE7

    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).
    Last edited by Daniil; May 31, 2013 at 3:47 AM. Reason: [CLOSED]
  2. #2
    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)
  3. #3
    Please review the following thread
    http://forums.ext.net/showthread.php...w-and-form-tag
  4. #4
    You can force rendering to document.body by using
     DefaultRenderTo="Body"
  5. #5
    Quote Originally Posted by Vladimir View Post
    You can force rendering to document.body by using
     DefaultRenderTo="Body"
    How would I use the above suggestion?
  6. #6
    It is window property, just apply to the window
  7. #7
    Quote Originally Posted by Vladimir View Post
    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.
  8. #8
    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>
  9. #9
    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.
  10. #10
    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.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Window modal IE7
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 08, 2012, 10:16 AM
  2. Replies: 5
    Last Post: Apr 20, 2012, 6:20 AM
  3. [CLOSED] Ext.Window: Question about clicking outside a modal Window
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 07, 2012, 6:00 AM
  4. [CLOSED] X.Msg with Modal Window
    By jwf in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 20, 2011, 9:22 PM
  5. Modal Window
    By erey in forum 1.x Help
    Replies: 0
    Last Post: Mar 29, 2010, 12:06 PM

Posting Permissions