Scroll Bug with Ext.Picker in Sencha Touch

Question

Once again I need the help from this awesome community.

My problem appears when I create a Ext.Picker in my Controller

here is a simple version of my Picker:

var picker = Ext.create('Ext.Picker', {
    slots: [
        {
            name : 'limit_speed',
            title: 'Speed',
            data : [
                {text: '50 KB/s', value: 50},
                {text: '100 KB/s', value: 100},
                {text: '200 KB/s', value: 200},
                {text: '300 KB/s', value: 300}
            ]
        }
    ]
});
Ext.Viewport.add(picker);
picker.show();

When the Picker panel pops up I can scroll my entire screen away.

I tried to set the scrollable: false attribute where ever i could, but still I can scroll over the borders.

Some further strange facts: the distance how far I can scroll down varies and I cannot figure out on what this depends on. Sometimes I can scroll until I have the whole screen black but sometimes I cannot scroll at all. Furthermore this bug won't appear on each device. For instance I have these problems on my HTC One S with Android 4.1.1 but a HTC One X with Android 4.1.1 isn't affected by this bug.

If someone is willing to see the entire code:

View TimerPanel holding everything together: http://pastebin.com/2FiPgZqW

View TimerEdit: http://pastebin.com/yv08tsYk

Controller telling when to launch the Picker: http://pastebin.com/LkQWhaAF

Can anybody tell me if this is a known bug or if I'm doing something wrong.

Answer 1

A quick look... Major issue - over-nesting. Your view is a container (or panel inheriting all container attributes) - layout fit. It has 1 item in it - a container with layout vbox (with 6 items - that continues to nest and nest...).

The first container (view), is this to fill a region in another view/panel? ie: why are you using layout:fit?

Assumption: This panel seems to be a standalone page, where you want it to be fullscreen and without scrolling / overflow.

Remove one of the top containers to have this:

Ext.define('MyApp.view.TimerPanel', {
    extend: 'Ext.Container',
    alias: 'widget.timer',

    config: {
        layout: {
            type: 'vbox',
        },
        scrollable: false, // shouldn't be needed.
        fullscreen: true,
        items: [{
            xtype: 'container',
            docked: 'top',
            height: 50,
            layout: {
                type: 'hbox'
            },
            ...

Your container will fill the screen from "fullscreen" and the vbox|flex values you have on child elements will offer the ratios you want.

What you were experiencing was the "scrolling causing drag on form/field elements bug" from over-nesting your view, as well as over-configuring settings. Sencha has defaults and fallbacks for most options not set. Some things when set, offer a conflict to something else. Add in touch-events to all the listeners on fields and the code just spits the dummy and starts causing errors.

When your page starts doing scroll/drag errors, start by removing all the settings of fullscreen and scrollable (ie: not set to true/false/other - remove them!), then check your layouts - make certain you're using the simplest method to show what you need. Then start adding in fullscreen/scrollable when absolutely necessary.

As for scrollable, it seems some further descriptions could be helpful :D An example of a complex setting for scrolling:

scrollable: {
    direction: 'vertical',
    directionLock: true,
    translatable: {
        translationMethod: 'auto'
    },
    momentumEasing: {
        momentum: {
            acceleration: 30,
            friction: 0.5
        },
        bounce: {
            acceleration: 20,
            springTension: 0.5,

        },
        minVelocity: 5
    },
    outOfBoundRestrictFactor: 0
},

An example of no scrolling:

    scrollable: false,

A simple method for scrollable-y true, scrollable-x false:

    scrollable: 'vertical',

Scrollable accepts both string and object configurations.

Hope this all helps. Cheers, G

P.S. If it still plays up, I'll try and find the time to give it a once-over to be able to give you working code.