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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  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?

Similar Threads

  1. Replies: 13
    Last Post: Oct 30, 2018, 1:47 AM
  2. [CLOSED] How to handle GridPanel row tap in Mobile device?
    By Holly in forum 3.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 04, 2015, 2:39 PM
  3. [CLOSED] How to implement Double tap listener for touch device
    By iansriley in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 27, 2015, 9:20 PM
  4. Replies: 2
    Last Post: Jun 06, 2013, 6:45 AM
  5. [CLOSED] Unrecognized tag prefix or device filter 'ext' message
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 07, 2013, 2:05 PM

Tags for this Thread

Posting Permissions