Ext JS 4 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:

// 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

     

    // 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');

    }

}