The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[OPEN] [#1560] [4.4.1] Bug in Treepanel inside a dropdown

  1. #1

    [OPEN] [#1560] [4.4.1] Bug in Treepanel inside a dropdown

    Hello
    We recently upgraded a project from Ext.Net 2.3 to 4.4. We have a lot of dropdown with a treepanel as their components. These are not working correctly now, when expanding nodes the drop-down collapses and user needs to expand the dropdown again to navigate the tree.
    I could reproduce this in examples project, based on treepanel with loader (.ashx).
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>TreePanel with ajax proxy using HttpHandler - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>TreePanel with ajax proxy using HttpHandler</h1>
            <ext:DropDownField runat="server" Width="500">
                <Component>
            <ext:TreePanel
                ID="TreePanel1" RootVisible="False"
                runat="server"
                Title="Tree"
                Height="300"
                        Width="200"
                        Shadow="false"
                        UseArrows="true"
                        AutoScroll="true"
                        ContainerScroll="true"
                        >
                <Store>
                    <ext:TreeStore runat="server">
                        <Proxy>
                            <ext:AjaxProxy Url="TreeLoader.ashx" />
                        </Proxy>
                    </ext:TreeStore>
                </Store>
                <Root>
                    <ext:Node NodeID="0" Text="Root" />
                </Root>
            </ext:TreePanel>        
                </Component>
            </ext:DropDownField>
            
        </form>
    </body>
    </html>
    To Reproduce
    Click Dropdown to expand, now expand some nodes and then their children, you will see the 'picker' element gets closed. This is annoying for the user.
  2. #2
    Hi @Fabricio
    Any update on this bug?thanks,
  3. #3
    Hello @mirwais!

    This really look like a bug due to the loader mask that is shown during load. At some point the load mask focuses to an non-existing component and this acts as a focus outside.

    On a pragmatic approach, seems like ignoring focus changes "to nothing" fixes the issue. Can you test this throughout your application to see if you get any undesired side effects?

    Ext.define("thread62129", {
        override: "Ext.ComponentManager",
        onGlobalFocus: function (e) {
            var me = this;
    
            if (Ext.Component.from(e.toElement) == null) return;
    
            return me.callParent(arguments);
        }
    });
    Looking forward to your feedback!

    This bug looks very similar to #901 but the alternatives given there does not apply here, so assuming it a new issue. We've logged this issue as #1560 in our issues tracking platform.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hi @Fabricio
    Thank you very much, this fix for now works and I don't see any side effects for the moment.
    However I see that there is a problem when it's inside a window container, as I said in previous versions (2.3) we did not have these issues. Probably these bugs are related, so to take my previous example inside a window, with your patch:
     <ext:Window runat="server" Width="600" Height="300" Layout="FormLayout" >
                <Items>
                        <ext:DropDownField runat="server" Width="500">
                <Component>
            <ext:TreePanel
                ID="TreePanel1" RootVisible="False"
                runat="server"
                Title="Tree"
                        Shadow="false"
                        UseArrows="true"
                        AutoScroll="true"
                        ContainerScroll="true"
                        >
                <Store>
                    <ext:TreeStore runat="server">
                        <Proxy>
                            <ext:AjaxProxy Url="TreeLoader.ashx" />
                        </Proxy>
                    </ext:TreeStore>
                </Store>
                <Root>
                    <ext:Node NodeID="0" Text="Root" />
                </Root>
                <%--<ViewConfig LoadMask="false" />--%>
            </ext:TreePanel>        
                </Component>
            </ext:DropDownField>
                </Items>
            </ext:Window>
    Bug: expand the drop down and move the window, dropdown's picker is somehow detached and this creates some other issues in the UI. This problem is not there when my drop down has a list instead of a tree, like a simple grid, or a combobox instead of a dropdown.
  5. #5
    Hello, @mirwais!

    If the workaround here does not represent a fix for this issue you last posted, maybe we'd better handle that in another forum thread or it will become confuse to track the different issues with the component.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 7
    Last Post: Jun 23, 2015, 3:28 PM
  2. problem with treepanel in dropdown
    By lotfizadeh in forum 1.x Help
    Replies: 0
    Last Post: Mar 11, 2015, 8:03 PM
  3. TreePanel inside dropdown reload problem
    By cicaglisa in forum 1.x Help
    Replies: 1
    Last Post: Nov 02, 2012, 4:02 AM
  4. Replies: 6
    Last Post: Feb 08, 2011, 7:17 PM
  5. [CLOSED] TreePanel inside dropdown
    By Pablo_Azevedo in forum 1.x Premium Help
    Replies: 12
    Last Post: Oct 06, 2010, 7:08 PM

Posting Permissions