Daily Archives: February 5, 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:

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!