[OPEN] [#1479] [4.2.0] BorderLayout Floating Region hides when an element hovers between the panel and the mouse pointer

  1. #1

    [OPEN] [#1479] [4.2.0] BorderLayout Floating Region hides when an element hovers between the panel and the mouse pointer

    Hello, we're experiencing the issue described below.

    Problem

    The problem occurs on all side regions of a border layout when the Floatable attribute is true.

    If a side region panel is displayed as floating element (clicking on its title) and any other item (tooltip, cascading menu, etc.) place itself between
    the floating region and the mouse pointer, It causes the floating panel to hide.

    In-depth Explanation and Example
    This example is based on one of your examples (https://examples4.ext.net/#/Layout/B..._Region_Image/) on border layouts and regions, with the only difference being the Floatable attribute of the west region set to “true”.

    To reproduce theissue, just click on the west region title to make the navigation panel appear as a floating panel.
    Click image for larger version. 

Name:	bug1.png 
Views:	34 
Size:	8.0 KB 
ID:	24944
    While the cursor hovers the panel or any item of the panel, the navigation panel stays visible.
    Click image for larger version. 

Name:	bug2.png 
Views:	66 
Size:	7.5 KB 
ID:	24945
    But as soon as the mouse pointer hovers the items of the combobox cascading menu, the navigation panel starts hiding.
    Click image for larger version. 

Name:	bug3.png 
Views:	39 
Size:	7.5 KB 
ID:	24946

    Same goes for any item, even in the central region, that creates elements (like tooltips, etc.) that stand between the mouse pointer and the panel surface.

    In the following example the menu floating panel is displayed and while hovering it, a tooltip generated from a chart placed in the center region (partially
    covered by the floating menu) place itself between the floating menu and the pointer, causing the menu to disappear.

    Click image for larger version. 

Name:	bug4.png 
Views:	43 
Size:	18.5 KB 
ID:	24947

    Here you go with the code:
        <ext:Window
            runat="server"
            Title="Floatable Region Test"
            Icon="Application"
            Width="600"
            Height="350"
            Border="false"
            Closable="false"
            X="100"
            Y="100"
            Plain="true"
            Layout="BorderLayout">
            <Items>
    
                <ext:Panel
                    ID="WestPanel"
                    runat="server"
                    Region="West"
                    Collapsible="true"
                    MinWidth="175"
                    Split="true"
                    Width="175"
                    Title="Navigation"
                    TitleCollapse="false"
                    Floatable="true"
                    Collapsed="true"
                    BodyPadding="5">
    
                    <Items>
    
                        <ext:ComboBox runat="server" ID="cmbTest" QueryMode="Local">
                            <Items>
                                <ext:ListItem Text="Test 1" Value="1" />
                                <ext:ListItem Text="Test 2" Value="2" />
                                <ext:ListItem Text="Test 3" Value="3" />
                                <ext:ListItem Text="Test 4" Value="4" />
                                <ext:ListItem Text="Test 5" Value="5" />
                            </Items>
                        </ext:ComboBox>
    
                    </Items>
    
                </ext:Panel>
    
                <ext:Panel runat="server" Region="Center" Title="Center region" />
    
            </Items>
        </ext:Window>
    Thank you for a feedback on the same,
    Cheers,
    Adriano
  2. #2
    Hello @adrianot!

    I don't have great news, but I believe this issue has been on ExtJS for years now. We have logged this under #1479 and linked to Sencha issue. The Sencha issue does not use the same scenario as you described but I am confident it is the same issue. Border layout, having floatable and collapsible panels, misbehavior.

    I'm afraid there's a design conflict with having floatable panels inside a border layout so you should avoid it for the time being.

    We'll post an update here as soon as we either notice sencha had this fixed or we have been able to find a workaround for this.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Dropdown without Caret (mouse pointer)
    By RajivDutt in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 06, 2014, 5:47 PM
  2. [OPEN] [#287] borderLayout button collapse of south region
    By ViDom in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 27, 2013, 4:44 AM
  3. Replies: 1
    Last Post: Dec 12, 2011, 12:50 AM
  4. Replies: 4
    Last Post: Oct 21, 2011, 4:48 PM
  5. [EXAMPLE] BorderLayout with image on Collapsed Region
    By geoffrey.mcgill in forum Examples and Extras
    Replies: 0
    Last Post: Oct 07, 2008, 1:13 PM

Posting Permissions