CODEWITHSUNDEEP
javascriptdatepickersencha-touch
jszpila
jszpila

Reputation: 706

Sencha Touch panel/date picker rendering issue

I'm maintaining a Sencha Touch 1.1 application and I'm trying to resolve an issue that we've noticed on Android tablets (specifically, the Samsung Galaxy Tab S, Android 3.1).

The issue that's occurring is that there are two fields on a login form: a Sencha text field and a Sencha date picker field. When the user has the text input focused and then taps to focus the date picker field, the virtual keyboard is collapsed and the datepicker shows up above where the virtual keyboard ended (in about the middle of the page).

Note that this does not happen when the user focuses on the date picker field first; this leads me to believe that is has something to do with Sencha not properly handling the window resize event that is thrown whenever the keyboard is shown or hidden, and is subsequently failing to recalculate the dimensions of the containing view object accordingly.

The view extends Ext.Panel (hence the title), I've tried using the doLayout and doComponentLayout methods when the resize event occurs, however, neither seem to work.

Any ideas?

Upvotes: 0

Views: 1507

Answers (1)

Edward B
Edward B

Reputation: 136

This is hard and it's related to the containers height not being fully reverted because of the animation that hides the keyboard.

First of all, you could try adding a a long delay 1-2 seconds before showing the picker to confirm this is the issue.

If it is, there's a tricky workarounds that come to my mind:

  • Save the container panel's height (must be updated onorientationchange)
  • When the picker is called (you need to figure out which picker event to listen to , either beforeadd, beforerender or beforeshow) you verify that the height is not lower or else you cancel the picker action.
  • Set an interval to verify it a couple of miliseconds later, until the height is restored and the lower margin is correct.

You might also want to cancel showing the picker while orientationchange is occuring on the container panel to avoid further problems.

Note that this is assuming the panel's height or viewport changes its height with the keyboard that it's shown, if not you should look out for any properties that might be changed, or even add an boolean variable to the onresize event to validate against before showing the picker.

Upvotes: 2

Related Questions