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] [#1539] [4.3.0] menus from a touchscreen device

  1. #1

    [OPEN] [#1539] [4.3.0] menus from a touchscreen device

    With Ext.NET 4.2.0, I'm unable to get a simple menu to activate from touchscreen devices. A simple example is below.
    The listener does get invoked, as the custom message shows up in the little display area.
    However nothing happens, when viewing the page from Chrome's touchcreen device simulations.
    When using the browser from PC, everything works as expected. Please advise, thanks.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {        
            //do nothing special        
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Toolbar with Menu - TouchScreen vs. MouseClick</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <style>
            .menu-title {
                background   : #D6E3F2;
                border-style : solid;
                border-color : #DAE6F4 #99bbe8 #99bbe8 #DAE6F4;
                border-width : 1px;
                margin  : -2px -2px 0;
                color   : #15428b;
                font    : bold 10px tahoma,arial,verdana,sans-serif;
                display : block;
                padding : 3px;
            }
        </style>
    
        <script>                        
            var onItemActivated = function(item){
                msg("Item Activated", 'You activated the \'{0}\' menu item', item.text);
            };
    
            var msg = function (title, format) {
                var s = Ext.String.format.apply(Ext.String, Array.prototype.slice.call(arguments,1));
                Ext.get("notificationArea").update(s).highlight();
            };
        </script>
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h2>Toolbar with a Simple Menu </h2>
            
            <p>Compare activating the links:</p>
            <ol>
                <li>with touchscreen from simulated device</li>
                <li>with a normal mouse click from PC</li>            
            </ol>
                    
    
            <ext:Toolbar runat="server" Width="822">
                <Items>
                    <ext:Button ID="MenuButton" runat="server" Text="Button to toggle Menu" Icon="ArrowDown">
                        <Menu>
                            <ext:Menu runat="server">
                                <Items>                                                            
                                    <ext:MenuItem runat="server" Text="Take me to Google - implicit target" Href="http://www.google.com" Handler="onItemActivated" />
                                    <ext:MenuItem runat="server" Text="Take me to Google - explicit self target" Href="http://www.google.com" HrefTarget="_self" Handler="onItemActivated"/>
                                    <ext:MenuItem runat="server" Text="Take me to Google - explicit blank target" Href="http://www.google.com" HrefTarget="_blank" Handler="onItemActivated"/>
                                    <ext:MenuItem runat="server" Text="Take me to Google - explicit parent target" Href="http://www.google.com" HrefTarget="_parent" Handler="onItemActivated"/>
                                    <ext:MenuItem runat="server" Text="Take me to Google - explicit top target" Href="http://www.google.com" HrefTarget="_top" Handler="onItemActivated"/>                                                                
                                    <ext:MenuSeparator />
                                </Items>
                            </ext:Menu>
                        </Menu>
                    </ext:Button>                
                    <ext:ToolbarSeparator />                
                </Items>
            </ext:Toolbar>
    
            <div id="notificationArea" style="width: 800px; padding: 10px; border: 1px solid black; height: 40px;"></div>
        </form>
    </body>
    </html>
  2. #2
    Hello @Caleb!

    I believe you posted in the wrong forum, as you are talking about Ext.NET 4.2.0. Ext.NET Mobile latest version is 4.1.0.

    Besides, Ext.NET latest version is currently 4.3.0, that is the version we can test your test case against, if we are talking about the "desktop" version of Ext.NET.

    Please confirm the Ext.NET version so we can move your thread to the appropriate forum.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I've tried this in the latest Ext.NET (desktop) version and, while emulating touch events with chrome, could reproduce the issue.

    The sample test case does not look like an Ext.NET Mobile test case but we'd wait for your confirmation before we proceed.

    Something interesting (back to Ext.NET Desktop) is, if you draw the same menu in a MenuPanel, then it works fine. This means it could be possible to overcome this issue by drawing a menu panel inside a menu or some encapsulating of the likes.

    Looking forward to your follow-up.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Yes, this does belong in the desktop Ext.net forum. Can you please relocate this for me? Thanks Fabricio.
    We're currently transitioning to 4.3.0, but the same behavior's happening in that version as well.


    Can you show me how to draw this inside of a menu panel?
    Changing the container from Ext toolbar to MenuPanel is making the components disappear for me.


    Finally, any thoughts on what sort of adjustments the rest of our codebase will have to make? Would ideally like to keep the Ext toolbar in place b/c current use case requires a long horizontal series of tabbed menus across the form. Thanks
    Last edited by Caleb; Aug 31, 2017 at 2:33 PM.
  5. #5
    Hello @Caleb!

    We've just moved the thread to the appropriate forums. Thanks for confirming.

    As for the "alternative that works" it is not nearly as close to your use case. I just tested the same menu component inside a menu panel -- outside the button dropdown.

    I the tests here, if I extract the menu entry to somewhere outside the dropdown, it works in touch-driven devices. The problem is to the "pop up" container and not with the menu it seems. We need to further investigate this and get to the bottom of the reasons still.

    For now, what I can suggest you of immediate is using javascript code on the click event to do the redirect instead of relying on the href setting.

    We've created the issue #1539 to track this defect. This is very likely to be exclusively sourced from the ExtJS framework, and not a bug introduced by Ext.NET integration though.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Thanks for the suggestion and for adding this to the bug list.

    This discussion from ExtJS may help regarding the bug fix:
    https://www.sencha.com/forum/showthr...iPhone-or-iPad

    As you suspected, there was a break in ExtJS. But it sounds like it got fixed later?
  7. #7
    @Fabricio,

    Hi, some of our users are noticing an unexpected side-effect from the suggested workaround.
    When they ctrl+click on the menu item, rather than opening the linked URL in a new tab - it opens two tabs?

    Is there something we're missing in our implementation of the workaround? (please see below)
    We've even tried, in the code behind handler, to stop propagating the click event but without any success.
    Really, we'd prefer to use the Ext.net permanent solution, if that's available before our next customer deployment.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            //do nothing special                        
            subMenu1.Listeners.Click.Fn = "handleLinkClick";
            subMenu1.Listeners.Click.StopEvent = true;
            subMenu1.Listeners.Click.StopPropagation = true;                
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Toolbar with Menu - TouchScreen vs. MouseClick</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <style>
            .menu-title {
                background   : #D6E3F2;
                border-style : solid;
                border-color : #DAE6F4 #99bbe8 #99bbe8 #DAE6F4;
                border-width : 1px;
                margin  : -2px -2px 0;
                color   : #15428b;
                font    : bold 10px tahoma,arial,verdana,sans-serif;
                display : block;
                padding : 3px;
            }
        </style>
    
        <script>                        
            var handleLinkClick_DOM = function(item, e){
                msg("Item Activated", 'You activated the \'{0}\' menu item', item.text);
    
                if (e.ctrlKey) { //if ctrl was pressed, open menu url in a new tab
                    window.open(item.href, "_blank");
                } else {         //otherwise, open menu url in same page		    
                    window.open(item.href, "_self");
                }
            };
    
    
            //attaches to links under the main tabs; uses native JS to open the URL as work around until Ext.NET v4.4.0 fixes this
            var handleLinkClick = function (item, e) {
                msg("Item Activated", 'You activated the \'{0}\' menu item', item.text);
    
                if (e.ctrlKey) { //if ctrl was pressed, open menu url in a new tab
                    window.open(item.href, "_blank");
                } else {         //otherwise, open menu url in same page		    
                    window.open(item.href, "_self");
                }            
            };
    
            var msg = function (title, format) {
                var s = Ext.String.format.apply(Ext.String, Array.prototype.slice.call(arguments,1));
                Ext.get("notificationArea").update(s).highlight();
            };
        </script>
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h2>Toolbar with a Simple Menu </h2>
            
            <p>Compare ctrl+clicking the links; both open extra tabs</p>        
                            
            <ext:Toolbar runat="server" Width="822">
                <Items>
                    <ext:Button ID="MenuButton" runat="server" Text="Button to toggle Menu" Icon="ArrowDown">
                        <Menu>                        
                            <ext:Menu runat="server">
                                <Items>                                                            
                                    <ext:MenuItem ID="subMenu1" runat="server" Text="Take me to Google - implicit target - codebehind handler" Href="http://www.google.com"/>
                                    <ext:MenuItem ID="subMenu2" runat="server" Text="Take me to Google - implicit target - DOM handler" Href="http://www.google.com" Handler="handleLinkClick_DOM"/>                                                                                            
                                    <ext:MenuSeparator />
                                </Items>
                            </ext:Menu>
                        </Menu>
                    </ext:Button>                
                    <ext:ToolbarSeparator />                
                </Items>
            </ext:Toolbar>            
    
            <div id="notificationArea" style="width: 800px; padding: 10px; border: 1px solid black; height: 40px;"></div>
        </form>
    </body>
    </html>
  8. #8
    Hello, @Caleb,

    It probably happens twice because you still have the href set up in the menu entries, so in the situation that the user ctrl+clicks it, the click goes to the direct event and makes it load the URL by one side, and the new tab opened with 'ctrl' goes just thru the inner a href element, thus the browser get both redirects.

    If you leave both the click handler and the href settings, devices that support the href will also be going to be redirected by that so double redirects would be expected.

    If you want to keep the href setting you may limit your event handler by the browser features that enables the bug (I believe Ext.supports.TouchEvents will be set as true in such browsers, for instance).

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 11
    Last Post: Apr 26, 2016, 6:17 PM
  2. Replies: 6
    Last Post: Dec 04, 2015, 2:39 PM
  3. Replies: 1
    Last Post: Apr 27, 2015, 9:20 PM
  4. Replies: 2
    Last Post: Jun 06, 2013, 6:45 AM
  5. Replies: 3
    Last Post: Jan 07, 2013, 2:05 PM

Tags for this Thread

Posting Permissions