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:

before

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:

after

 

The code to implement this feature is actually quite straightforward:

// highlight all invalid fields on form
button.up('form').isValid();

// get panels in tab panel
var panels = button.up('form').query('tabpanel > panel');

// loop through each panel
for (var i=0; i<panels.length; i++) {
    
    // determine if invalid fields are present on the tab
    var invalids = panels[i].query("field{isValid()==false}");

    // set appropriate icons on the tabs
    if (invalids.length > 0) {
        panels[i].setIcon('resources/images/error.png');
    } else {
        panels[i].setIcon('resources/images/check.png');
    }
}

Happy coding!

2 thoughts on “Ext JS 4 Protip: Providing Feedback to Users of a Tabbed Form

  1. Ivan Jouikov

    Only thought is “Validate” button might be confusing to the user, so this should happen either automatically as the form is being interacted with, or upon submission attempt.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s