2

I have a multipage form with more than 40 fields spread over multiple tabs, and grouped in collapsible fieldsets.

Now I have the case that upon form submission, a field is detected as invalid, and I want to find the field for the user, bring it into the visible area and focus it. So I have to switch to the right tab, open the fieldset if applicable, scroll the field into the visible area and focus it.

I would guess ExtJS has a function for this, but I don't find one. My code:

// Get first invalid field. C&P from Ext.form.Basic.isValid function
var invalidField = me.getForm().getFields().findBy(function(f) {return !f.isValid();});
if(invalidField) {
    // TODO: Bring the field to front.
    // Now focus the field:
    invalidField.focus();

Is there a builtin function available?

Alexander
  • 19,906
  • 19
  • 75
  • 162
  • Hi Alexander. I have exactly the same question to solve, but I haven't got a solution yet, which is why your question is very important to me. In my case, to solve, I was considering validating the form tab a tab. In a very different situation, but perhaps with interest , take a look at this post: http://stackoverflow.com/questions/19354433/extjs-form-isvalid-is-false-but-how-to-know-why-the-form-is-invalid – jose Apr 22 '17 at 11:09

1 Answers1

2

Ext JS does not provide a built-in method for doing this specifically, but it does provide all of the necessary utility methods and supports animations. At a minimum, ensuring the form is configured as scrollable, setting the active tab, and focusing on the invalid field is enough to scroll to correct position. I created a fiddle example demonstrating a solution.

Sencha Fiddle: An Example of Scrolling to an Invalid Field in a Tab

tabPanel.items.each(function(tab) {
    var formPanel = tab.down('form');
    formPanel.getForm().getFields().each(function(field, index, length) {
        if (!field.isValid()) {
            tabPanel.setActiveTab(tab);
            // Focusing an element will set the correct scroll position.
            // However, an animation can help the user follow along.
            formPanel.setScrollY(field.getPosition()[1], true);
            field.focus();
            return false;
        }

        return true;
    });
});

http://docs.sencha.com/extjs/6.2.0/classic/Ext.Component.html#method-getPosition http://docs.sencha.com/extjs/6.2.0/classic/Ext.Component.html#method-setScrollY

Trevor Karjanis
  • 1,485
  • 14
  • 25
  • I would additionally check that the field has an isValid() method. Forms can contain fields without it. `Ext.isFunction(field.isValid) && !field.isValid()` – dearSympho May 05 '17 at 21:28