Prev and next buttons for pickers in Sencha Touch 2

Question

I'm building an App for Android, iOS and Blackberry with Sencha Touch 2.0.1.

I have a Form-Panel with about 10 selectfields and some sextfields. If i ran the app on Android 2.3 or higher, the selectfields are shown as pickers. So far so good.

When the user starts filling out the form starting with textfields, he can go through the form using the next-button on the virtual keyboard. The problem is, that the selectfields are ignored by the next-button. The user has to tap on the selectfields.

I can't figure out how to get prev- and next-Buttons for the picker-elements. So that I can go through the form only with the next-Button instead of pressing "done" and tapping on the next Selectfield. It would be far more comfortable for the user.

So support of the sencha-forum isn't really helpful, see below:

http://www.sencha.com/forum/showthread.php?219636-Native-select-field-for-Android http://www.sencha.com/forum/showthread.php?205581-Can-I-use-iOS-native-picker-instead-of-ST2-picker

According to this, there are prev- and next buttons available for a picker: http://www.sencha.com/forum/showthread.php?205159-Ext.picker.Date-with-no-prev-and-next-buttons&p=803794

But I can't find them:-(

I think, there are two solutions to the problem:

1. Accessing the native Picker as proposed in the first link above. The question is how?
2. Implementing an own Picker-Element with an Prev- and Next-Button. This seems to be a huge efford for such a basic task.

I can't really believe, that this is such a big deal in a big framework like Sencha Touch.

Anyone facing the same problem and has a working solution?

Answer 1

My only idea for you would to put your picker on the page as normal, then add two buttons on the page - a Prev and Next buttons using Sencha. Then add onTop handlers for those buttons, that use the picker's .setActiveItem() method to set the picker to the next or previous item. Hopefully that will get you on your way.

http://docs.sencha.com/touch/2-0/#!/api/Ext.picker.Picker-method-setActiveItem