View Full Version : Picker scrolls screen away

11 Jun 2013, 1:17 PM
So far I found solutions to my problems by just reading the already existing topics in this awesome forum. But right know I'm going insane with a problem and I couldn't find help anywhere. So heres my problem:

I have a Container containing (beyond other elements) a List. If I tap on a list entry I want a Picker to show up. So far everything is working well. But when I scroll over the Picker to set it, the whole screen moves away. Because it's quite difficult to explain, here are two pictues showing what I want to say. When I tap for instance on "Timer 2" the Picker appears. In the 2nd picture you can see what happens:


What I could figure out so far:

This issue appears only on some devices. Devices with this bug: HTC One S, Nexus 4, LG Optimus P970. Devices without this bug: HTC One X, Samsung Galaxy S2, Samsung Galaxy Ace
The bug appears with Sencha Touch Versions: 2.1.0, 2.2.0 and 2.2.1
The scope (meaning: the distance I'm able to scroll out) varies within the same device. Sometimes it cannot be scrolled at all, sometimes I can scroll until the whole screen is black. I wasn't able to figure out on what this distance depends on.
I figured out a strange "workaround":

Tap in the "Name" Textfield which can be seen in the very top of the 1st screenshot. (the virtual keyboard will show up).
While the keyboard is up: Tap on one of the list entries (both, the keyboard and the Picker will be present)
Close the keyboard
The Picker works now "normal".

I hope you can help me out, because I spent several hours on this issue without success.

Here is some of my code:

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

Controller telling when to launch the Picker. Also the container contains the definition of the Picker. http://pastebin.com/LkQWhaAF

I'm looking forward to your answers!


13 Jun 2013, 4:30 AM
Seems like the community is at the same loss than I am. Nobody got an idea or a similar problem?

17 Jun 2013, 1:58 AM
Last try: Nobody even has a guess? I'm going insane with this...

16 Aug 2013, 7:54 PM
Hi, I came across your post while searching for a solution to TOUCH-4800 (http://www.sencha.com/forum/showthread.php?270002-Select-field-mask-not-disappearing-HTC-one), so I'll just leave my workaround here in case anyone is interested.

Basically you have to prevent the document element from picking up on the touch event if it is sent to the x-picker element, similar to how you would prevent the document from being scrollable on iOS.

// Disable page scroll (fixes HTC device page scrolling off the screen when dragging the Sencha Picker)
document.body.addEventListener('touchstart', preventBodyScroll, false)
function preventBodyScroll (e)
if(!e) var e = window.event

var target;
if(e.target) target = e.target
else if (e.srcElement) target = e.srcElement

while(target) {
if(target.className) {
var classes = target.className.split(' ')
for(var i=0; i<classes.length; i++) {
if(classes[i] == 'x-picker') {
console.log('Blocking touch event on x-picker.')
target = target.parentNode