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=...
Comments
Post a Comment