Thursday, February 6, 2014
Ext JS 4 Protip: Providing Feedback to Users of a Tabbed Form
Indicating to users that they’ve made data entry mistakes on a tabbed form is a UX challenge that can easily be overcome using Sencha’s Ext JS 4.
In the following prototype, I’ve designed a single-page app that displays a list of available forms in a grid at the top of the screen, and a tabbed data entry form (which can grow to many tabs since the form itself is assembled dynamically) that is displayed at the bottom of a “border” layout:
At the bottom of the form, I’ve added a “Validate” button that, when pressed, visually indicates all data input fields that failed validation on the current tab, as well as indicates other tabs where invalid data is present: