[OPEN] [#1190] [3.2.1] Window's modal mask does not respect ConstrainToElement

  1. #1

    [OPEN] [#1190] [3.2.1] Window's modal mask does not respect ConstrainToElement

    On the following example, press Show Window button. The window is constrained to Tab 001 panel, but the window's modal mask is not constrained.

    Thanks in advance.

    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
        <ext:ResourceManager Theme="Crisp" runat="server" />
        <ext:Viewport Layout="BorderLayout" runat="server">
            <Items>
                <ext:Panel Title="North" Html="North Content" Height="200" Region="North" runat="server" />
                <ext:TabPanel Title="Tab Panel" Region="Center" runat="server">
                    <Items>
                        <ext:Panel ID="_pnl001" Title="Tab 001" Html="Tab Content" runat="server">
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:Button Text="Show Window" runat="server">
                                            <Listeners>
                                                <Click Handler="#{_wdn}.show()" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Bin>
                                <ext:Window ID="_wdn" Title="Window" Html="Content" Modal="true" Constrain="true" ConstrainToElement="_pnl001" Hidden="true" runat="server" />
                            </Bin>
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    Last edited by Daniil; Dec 19, 2015 at 11:13 AM. Reason: [OPEN] [#1190] [3.2.1]
  2. #2
    Workaround: mask / unmask (lines 27 and 28) Tab 001 when Window is shown / hidden.

    Note: in my opinion, windows's modal mask should respect ConstrainToElement.

    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
        <ext:ResourceManager ScriptMode="Debug" Theme="Crisp" runat="server" />
        <ext:Viewport Layout="BorderLayout" runat="server">
            <Items>
                <ext:Panel Title="North" Html="North Content" Height="200" Region="North" runat="server" />
                <ext:TabPanel Title="Tab Panel" Region="Center" runat="server">
                    <Items>
                        <ext:Panel ID="_pnl001" Title="Tab 001" Html="Tab Content" runat="server">
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:Button Text="Show Window" runat="server">
                                            <Listeners>
                                                <Click Handler="#{_wdn}.show()" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Bin>
                                <ext:Window ID="_wdn" Title="Window" Html="Content" Constrain="true" ConstrainToElement="_pnl001" Hidden="true" runat="server">
                                    <Listeners>
                                        <Show Handler="#{_pnl001}.mask();" />
                                        <Hide Handler="#{_pnl001}.unmask();" />
                                    </Listeners>
                                </ext:Window>
                            </Bin>
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    Last edited by RaphaelSaldanha; Dec 07, 2015 at 6:42 PM.
  3. #3
    Hi Raphael,

    Thank you for the report and workaround!

    Created an Issue:
    https://github.com/extnet/Ext.NET/issues/1190

Similar Threads

  1. Replies: 1
    Last Post: Oct 21, 2013, 1:54 AM
  2. [CLOSED] modal window mask issue
    By SoftwareMHC in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 14, 2013, 2:15 AM
  3. [CLOSED] Modal Window Mask Target
    By mirwais in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 28, 2013, 1:14 PM
  4. The Modal Window behind own mask/shadow
    By savasdogangb in forum 2.x Help
    Replies: 1
    Last Post: Feb 20, 2013, 7:30 AM
  5. [CLOSED] Mask not covering the modal window
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 20, 2011, 3:46 PM

Posting Permissions