[FIXED] [#1331] [4.1.0] Ext.NET (not mobile) pinch/zoom under Mobile devices

  1. #1

    [FIXED] [#1331] [4.1.0] Ext.NET (not mobile) pinch/zoom under Mobile devices

    I loaded examples to my phone
    Then I loaded infinite grid scroll.

    I was unable to zoom in/out with standard touch zoom.

    Pls explain why not.
    /Z
    Last edited by fabricio.murta; Jan 14, 2017 at 8:35 PM.
  2. #2
    Hello @Z!

    Interesting. I tried this on an Android phone with Chrome browser.

    I could dual-finger-zoom in that example -- as long as I positioned my fingers outside both the examples expolorer's tree list and the example's grid panel.

    That's pretty much happening because the tree and grid are capturing and handling click events, thus disabling default browser's behavior.

    I'll investigate it a little more and file a bug ticket on github if that's really not the designed behavior and there's no way to let browsers handle the gestures in some situations.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again!

    Sorry, I have concluded by further investigating this, that it is by design.

    For example, if you check the ViewPort example on your mobile device, you'll notice that you can't pinch-zoom with the smartphone browser's native functionality.

    These events are captured and handled by ExtJS as a whole. There are the pinch, pinchstart and pinchend events to handle it in the framework.

    Additionally, we didn't add the recommended meta viewport to every example. If you run Ext.NET Examples in debug mode, you'll notice the console complaining about it.

    In fact, if you add the recommended code for mobile compatibility to the infinite scrolling example you pointed, no pinch scrolling would happen in the page at all!

    The code to properly (at least according to Sencha's design) set up a page to be mobile-friendly is:
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <ext:ResourcePlaceHolder runat="server" />
    added to the <head> section of the HTML page. Notice the ext:ResourcePlaceHolder below ensures Ext.NET will inject script resources after the meta tag, required for ExtJS to properly handle the setting.

    Additionally, as you can see in the code snippet above, the main point on the meta viewport is exactly inhibit mobile browsers' own scaling (pinch-zooming), most likely this feature broke havoc on the mobile integration during its development and evolvement.

    That said, and in brief: by design, ExtJS mobile support assumes you are drawing a responsive layout, appropriate for cellphone (or tablets) dimensions and lets you handle zoom/resize without letting cellphone default handlers to take place.

    Well, I believe this is not really what you want to hear, but truth be said. Maybe you are still interested in trying to disable pinch interation by ExtJS at all and letting the mobile browser handle that?
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Okay, I found a discussion about this at Sencha website and they claim the issue as fixed for the next release of ExtJS (6.1.0) -- likely Ext.NET 4.2.0.

    I've opened the issue #1331 on github to track the problem.

    We also have a related complaint about this problem on Ext.NET 3 series at Pinch to zoom mobile devices doesn't work.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Thank you. i hope you can backport the fix to 3.x as we haven't upgraded to 4.x and we are not sure of our upgrade timeframe.
    /Z
  6. #6
    any status on this?
    /Z
  7. #7
    Hello @Z!

    Sorry, nothing relevant new about this. But we already have a new ExtJS release (5.1.3) affecting 3.x series of Ext.NET and it will be merged to Ext.NET soon. Can't say for sure in the new release they fixed this, though.
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Just pinging this thread to make sure it will be fixed in EXT 4.2. This feature is why we bought EXT4 and are waiting to test.

    EXT 6.2 docs showing ping and zoom works properly now.
    http://docs.sencha.com/extjs/6.2.0/g...ade_guide.html

    Thanks,
    /Z
  9. #9
    Hello @Zdenek!

    This will then probably be fixed when we merge Ext.NET Mobile to ExtJS 6.2.1 Modern, which should happen in the next months to come. We'll provide feedback here once we merged the codes. We're currently working on Ext.NET (not mobile) 4.2.0.

    Edit: The topic title was a little misleading, I believe we are talking about Ext.NET with ExtJS 6.2.1 (classic tookit) here, right?.. Changed the thread title to remove the misunderstanding. As pointed above, we are currently working on Ext.NET 4.2.0! We're probably be bringing good news about this soon!
    Last edited by fabricio.murta; Dec 13, 2016 at 2:05 PM.
  10. #10
    Hello!

    Just tested the test case provided in the forum thread above (Pinch to zoom mobile devices doesn't work). Pinch zooming worked just fine in to-be-released Ext.NET 4.2.0 with ExtJS 6.2.1! So I guess we can mark this issue as fixed now!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Mobile for EXT.NET
    By bluenext in forum 3.x Premium Help
    Replies: 5
    Last Post: Aug 03, 2016, 7:49 AM
  2. Mobile development
    By cuki in forum 1.x Help
    Replies: 0
    Last Post: May 05, 2012, 6:06 PM
  3. [CLOSED] Mobile
    By rnfigueira in forum 2.x Premium Help
    Replies: 1
    Last Post: Mar 28, 2012, 3:14 PM
  4. [CLOSED] Mobile
    By rnfigueira in forum 1.x Premium Help
    Replies: 1
    Last Post: Aug 04, 2011, 2:32 PM
  5. [CLOSED] Compile error on build 1331
    By Jurke in forum 1.x Premium Help
    Replies: 2
    Last Post: Apr 22, 2009, 8:28 AM

Posting Permissions