» Fig Leaf Software Home

We've Got You Covered.

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:

The code to implement this feature is actually quite straightforward:

Happy Coding!
Written by: Steve Drucker
[Cross-Promoted: Druck-I.T.]

No comments:

Post a Comment

About Us

Fig Leaf Software is an award-winning team of imaginative designers, innovative developers, experienced instructors, and insightful strategists.

For over 20 years, we’ve helped a diverse range of clients...

Read More

Contact Us


Fig Leaf Software

1400 16th Street NW
Suite 450
Washington, DC 20036