[CLOSED] Pinch to zoom mobile devices doesn't work

  1. #1

    [CLOSED] Pinch to zoom mobile devices doesn't work

    Hi,
    recently I have migrated our site to Ext.net 3.3, but now pinch to zoom in moble devices does not work anymore.
    Plase help me.
    Thank you

    Jmmy
    Last edited by fabricio.murta; May 24, 2016 at 7:48 PM. Reason: no user feedback for 7+ days
  2. #2
    Hello xeo4.it! Sorry to hear you are having difficulties with the functionality!

    Can you point if there's an example on Examples Explorer that you can reproduce this issue? Or, maybe provide a test case where we can reproduce it?

    You were able to use the same device on older Ext.NET versions, right? What would be the mobile device or device range you are using to test the feature?
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio,
    look at my example http://test3.rilheva.it/testzoom.aspx
    we tried with iPad Air, iPad Pro, iPhone 5, iPhone 6s plus, all with ios 9, and some tablet and phone with Android 5 or 6.
    Thank you

    Jimmy

    <%@ Page Language="C#" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
    
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>FormPanel - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
    
           
                    <ext:GridPanel
                        runat="server"
                        Title="Company Data"
                        ColumnWidth="0.6"
                        Height="1000">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                            <ext:ModelField Name="price" Type="Float" />
                                            <ext:ModelField Name="change" Type="Float" />
                                            <ext:ModelField Name="pctChange" Type="Float" />
                                            <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                            <ext:ModelField Name="rating" Type="Int">
                                                <Convert Handler="var pct = record.get('pctChange'); if (pct < 0) return 2; if (pct < 1) return 1; return 0;" />
                                            </ext:ModelField>
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                                <ext:Column runat="server" Text="Price" Width="75" DataIndex="price">
                                    <Renderer Format="UsMoney" />
                                </ext:Column>
                                <ext:Column runat="server" Text="Change" Width="75" DataIndex="change">
                                    <Renderer Fn="change" />
                                </ext:Column>
                                <ext:Column runat="server" Text="Change" Width="75" DataIndex="pctChange">
                                    <Renderer Fn="pctChange" />
                                </ext:Column>
                                <ext:DateColumn runat="server" Text="Last Updated" Width="95" DataIndex="lastChange" />
                                <ext:Column runat="server" Text="Rating" Width="50" Sortable="true" DataIndex="rating">
                                    <Renderer Handler="if (value == 0) return 'A'; if (value == 1) return 'B'; if (value == 2) return 'C';" />
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <Listeners>
                            <SelectionChange Handler="if (selected[0]) { this.up('form').getForm().loadRecord(selected[0]); }" />
                        </Listeners>
                    </ext:GridPanel>
        </form>
    </body>
    </html>
  4. #4
    Hello @xeo4.it!

    I am afraid I don't have the good news you wanted, but after investigating this issue, it seems this lack of native pinch-zoom support is but part of the mobile-friendly implementation of ExtJS (Ext.NET's underlying framework).

    It is very likely that native pinch-zooming was breaking several interactions when touch-friendly events were imbued to ExtJS (thus Ext.NET), and they were avoided at all.

    Yet, proper events now exist to handle such actions in a way controlled by the developer.

    Please, take your time to review this thread, I believe it will pretty much answer your questions about it, and give you insight on how to handle the mobile side of the website: Mobile.

    I can't say for sure now but all that indicates that trying to override this behavior and let the smartphone/tablet browser native pinch-zoom handle the page is going to bring more trouble than not.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello!

    Just a quick feedback. Tested the pinch zoom feature on Ext.NET to-be-released 4.2.0 with the sample provided above, under google chrome device mode emulation, for both android and apple platforms, and pinch zoom is working fine!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    good to hear? release date? :)

    also, can you provide a sample example (or guidance) of the meta tags for 4.2 since i assume they will be different?

    Thanks,
    /Z
  7. #7
    Hello @Z!

    I can't say an exact date now, we're going to release it as soon as possible. All indicates in the next few weeks it should be happening.

    But notice we're talking about 4.2.0, which superseded 3.x for some time now. Unfortunately I don't see this being fixed in the 3.x series in the short term due to the amount of changes and reworking, that will be effectively turning 3.x into 4.x.

    About meta tags, I didn't have to change any in the examples I tested, so at first, meta tags won't be necessary -- of course, if you added meta tags to inhibit native interaction like zooming and panning, they will be obeyed by the smartphone's browser the same it did for previous version (it's up to the smartphone browser to interpret -- or not -- the related meta tags).

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 7
    Last Post: Mar 30, 2016, 6:57 PM
  2. Resize grid panel with gestures in mobile devices
    By gerardAlis in forum 2.x Help
    Replies: 1
    Last Post: Aug 20, 2015, 6:27 PM
  3. [CLOSED] combo box for mobile devices
    By rbtceo in forum 2.x Premium Help
    Replies: 3
    Last Post: May 17, 2015, 1:35 AM
  4. Tablet and mobile devices friendly UI?
    By Dimitris in forum Open Discussions
    Replies: 2
    Last Post: Dec 24, 2014, 5:54 AM
  5. [1.0RC]MultiHeader doesn't work.
    By firebank in forum 1.x Help
    Replies: 1
    Last Post: Nov 11, 2010, 4:06 PM

Posting Permissions