1. #1
    Sencha User
    Join Date
    May 2011
    Location
    Melbourne, Australia
    Posts
    89
    Vote Rating
    7
    Answers
    5
    Greg Arnott is on a distinguished road

      0  

    Default Unanswered: Form scrolling issue only when field target of touchmove event.

    Unanswered: Form scrolling issue only when field target of touchmove event.


    When I swipe up or down and a form field element is under where I've swiped (touchmove event target(s) include Ext.field.Field - mainly textfield), the page drags instead of scrolls. By drag, I mean the page top and bottom, including docked navigationview titlebar etc moves the respective up or down instead of content scrolling - although scrolling can still trigger, though "jump to" is a better description.

    Swipe up with the touchmove targets the scrollbar, a title or a component-free space, then this form is smooth and free-flowing - although the scrolling can sometimes get a little jittery if the target is other than scrollbar region. I'm aware of bug TOUCH-2704.

    I thought the issue may be related to using a formpanel in a tabpanel, but another form elsewhere (formpanel in a card container) displays the identical aberrations of page dragging instead of scrolling if the swipe targets include form fields.

    Sencha Touch: 2.1
    Developing in: Architect 2.2.2:991
    Building using: Cmd v3.1.2.342

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Using ST 2.1.1, this example works as expected for me where the form is scrolled not the page:

    Code:
    Ext.Viewport.add({
        xtype : 'navigationview',
        items : [
            {
                xtype       : 'formpanel',
                title       : 'Form',
                defaultType : 'textfield',
                items       : [
                    {
                        label : 'One'
                    },
                    {
                        label : 'Two'
                    },
                    {
                        label : 'Three'
                    },
                    {
                        label : 'Four'
                    },
                    {
                        label : 'Five'
                    },
                    {
                        label : 'Six'
                    },
                    {
                        label : 'Seven'
                    },
                    {
                        label : 'Eight'
                    },
                    {
                        label : 'Nine'
                    },
                    {
                        label : 'Ten'
                    },
                    {
                        label : 'Elevem'
                    },
                    {
                        label : 'Twelve'
                    },
                    {
                        label : 'Thirteen'
                    },
                    {
                        label : 'Fourteen'
                    },
                    {
                        label : 'Fifteen'
                    },
                    {
                        label : 'Sixteen'
                    },
                    {
                        label : 'Seventeen'
                    },
                    {
                        label : 'Eighteen'
                    },
                    {
                        label : 'Nineteen'
                    },
                    {
                        label : 'Twenty'
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2011
    Location
    Melbourne, Australia
    Posts
    89
    Vote Rating
    7
    Answers
    5
    Greg Arnott is on a distinguished road

      0  

    Default


    Hmm...
    Methinks my form may be suffering from a case of over-nested components.

    1 fieldset> 11 extended containers (they offer the title functionality like fieldsets) which handle localization, visibility and/or placeholders for dynamically loaded (as required) sections such as address fields.
    > > These hold either fields or containers of fields to produce the different layouts and structure required by the client.

    Time to see what I can do to flatten out the form, while keeping sections / structure.

  4. #4
    Sencha User
    Join Date
    May 2011
    Location
    Melbourne, Australia
    Posts
    89
    Vote Rating
    7
    Answers
    5
    Greg Arnott is on a distinguished road

      0  

    Default


    Rebuilt with 3 versions of form.
    App uses a navigationview, titlebar docked at top, fullscreen.

    Page is a 3 tab tabpanel with a form field in each, as the form in the non-test is on a card of a tabpanel.
    Tabs:
    1. original
    2. reduced nesting
    3. 5 fieldsets containing a collection of raw fields

    All 3 performed identically.
    Scrolling works if vertical swipe target is scroll bar or non-field.
    All pull titlebar down or base (no footer) up, pending direction.

    Behaviour:
    'touchmove' instead of scrolling the panel, tries to drag the field (touchstart target) which takes the rest of the page with it.

    The issue seems to not be based on form structure, but a missing/incorrect parameter on the container.

  5. #5
    Sencha User
    Join Date
    May 2011
    Location
    Melbourne, Australia
    Posts
    89
    Vote Rating
    7
    Answers
    5
    Greg Arnott is on a distinguished road

      0  

    Default


    Noticed form panels are nested within tab panels.

    Replaced tab panels with the 3 form panels.

    Fixed the issue on android devices.
    iOS - both Chrome and Safari - continue the same errant behaviour.

Thread Participants: 1

Tags for this Thread