Question

I’ve got a sencha touch app, with a panel that contains 3 image buttons, and the idea is that you can use flick scrolling to scroll them left or right to press the correct one.

The first time (after each load of the app) that you touch or flick these buttons, it doesn’t scroll, or it scrolls jerkily. It works ok if you touch it and hold your finger steady for half a second before moving. After that initial time it flicks nicely.

The panel is constructed like so:

var picScroller = { // The picture scroller
  flex: 1,
  cls: 'items',
  scroll: 'horizontal',
  layout: 'hbox',
  defaults: {
    width: 235,
    height: 160
  },
  items: [
    { width: 32 },
    { xtype: 'button', id:"bn1", cls:'myimagebutton', pressedCls:'', handler: myHandler },
    { xtype: 'button', id:"bn2", cls:'myimagebutton', pressedCls:'', handler: myHandler },
    { xtype: 'button', id:"bn3", cls:'myimagebutton', pressedCls:'', handler: myHandler },
    { width: 32 }
  ]
};

And my CSS is like so:

.myimagebutton {
  border:0;
  border-radius:0;
  margin:10px;
}

Any suggestions? thanks so much

Answer 1

Here’s an article that lists a solution to a similar-sounding problem (although this may be specific to being used in conjunction with PhoneGap): http://www.senchatouchbits.com/6/fixing-flickering-of-animations-in-phonegap.html