[OPEN] [#941] [3.2.1] Modal Window is applying mask in all panels of the TabPanel even if it belongs to only one

  1. #1

    [OPEN] [#941] [3.2.1] Modal Window is applying mask in all panels of the TabPanel even if it belongs to only one

    There is a bug when a window with modal is rendered to a panel inside of a tabpanel. Follow these steps below:

    1. Open Tab 1 and click on the button "Show Window". Keep the window opened.

    Click image for larger version. 

Name:	errowindow002_1.png 
Views:	2 
Size:	22.9 KB 
ID:	24334

    2. Change to Tab 2 or Tab 3 and note that the mask of Window opened in Tab 1 still is presented.

    Click image for larger version. 

Name:	errowindow002_2.png 
Views:	3 
Size:	25.6 KB 
ID:	24335

    Follows the isolated case code:

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            var onClick = function (pnl) {
                win = new Ext.Window({
                    renderTo: Ext.net.getEl(pnl),
                    height: 100,
                    width: 200,
                    constrain: true,
                    modal: true,
                }).show();
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:TabPanel runat="server" ID="_pnlCenter" Height="800" Region="Center">
            <Items>
                <ext:Panel runat="server" ID="_tab1" Title="Tab 1">
                    <Items>
                        <ext:Button runat="server" Text="Show Window">
                            <Listeners>
                                <Click Handler="onClick(App._tab1);" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Panel>
                <ext:Panel runat="server" ID="_tab2" Title="Tab 2">
                    <Items>
                        <ext:Button runat="server" Text="Show Window">
                            <Listeners>
                                <Click Handler="onClick(App._tab2);" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Panel>
                <ext:Panel runat="server" ID="_tab3" Title="Tab 3">
                    <Items>
                        <ext:Button runat="server" Text="Show Window">
                            <Listeners>
                                <Click Handler="onClick(App._tab3);" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:TabPanel>
    </body>
    </html>
    Ext.Net 3.1.0.20777
    Chrome 46
    Firefox 42
    IE 11

    Thanks
    Last edited by Daniil; Nov 25, 2015 at 1:41 PM. Reason: [OPEN] [#941] [3.2.1]
  2. #2
    Hi @RCN,

    Thank you for the report!

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

    A mask is applied over a Panel's component. When the active changes it takes the same place in the hierarchy and the mask is still over it. I could not find an easy fix, but a possible workaround would be listening to a Panel's Deactivate event, hide the Window and then re-show on Activate if needed.

Similar Threads

  1. Form Panel in Modal Window TabPanel Problem
    By hakandonmez in forum 3.x Help
    Replies: 14
    Last Post: Mar 15, 2015, 2:52 PM
  2. [CLOSED] modal window mask issue
    By SoftwareMHC in forum 2.x Premium Help
    Replies: 5
    Last Post: Aug 14, 2013, 2:15 AM
  3. [CLOSED] Modal Window Mask Target
    By mirwais in forum 2.x 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 Premium Help
    Replies: 5
    Last Post: Oct 20, 2011, 3:46 PM

Tags for this Thread

Posting Permissions