Mobile Fields


Progressive web apps are growing in usage. This growth is something with controversy as even with the power of progressive web apps there comes a trade off we must face as developers.

One such trade off is our comfort using xtype: ‘combobox’. This is great when using it with classic development and we expect users to access our product from a web browser. Unfortunately if we use this field in a progressive web app we may confuse those more familiar with a mobile application.

The solution to the problem when using the modern toolkit in Ext JS is change the use of

xtype: 'combobox'


xtype: 'selectfield'

The result of using a selectfield will surprise you and your user. The selectfield will open a regular combobox when viewed on a desktop web browser and turn it into a scrollable select on a mobile device positioned at the bottom of the device. This is the typical behavior iOS users expect when using an iOS app. It may not be as acceptable in the Android world though from those I know who have seen and used them find them something they like on the mobile platform as compared to the standard combobox action we’ve become accustomed to.

Select fields are not the only area we can help to move our apps to an improved mobile app experience for our users. For date fields rather than the typical

xtype: 'datefield'

change to

xtype: 'datepickernativefield'

This will accomplish the same results for date fields. It will be a three part spinner type date selector where one is month, date and year. On a desktop users will experience the typical date calendar they have become accustomed to.

Both of these xtype changes are fantastic news for those of us developing progressive web apps.

When developing we must keep in mind user experience and not what we become accustomed to. We develop for our users; we have pet projects of our own to develop what we want without thinking about end users.

Users are what we need to satisfy. Sencha Ext JS is striving to help us achieve what we want while trying to meet and/or exceed our users expectations. These tools help us develop applications quicker without the need to write extensive code to meet needs or better yet to wind up disappointing our end users with products we have outright not met their expectations and let them down.

Author: aallord

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.