複数ページのフォーム：無効なフィールドにフォーカスを持たせよう

Question

複数のタブに40以上のフィールドが広がり、折りたたみ可能なフィールドセットにグループ化された複数ページのフォームがあります。

フォーム提出時に、フィールドが無効として検出され、ユーザーのフィールドを見つけて可視領域に移動してフォーカスを合わせたい場合があります。したがって、適切なタブに切り替えて、該当する場合はフィールドセットを開き、フィールドを表示領域にスクロールしてフォーカスを合わせる必要があります。

ExtJSにはこの機能がありますが、見つからないと思います。私のコード：

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

組み込み関数はありますか？

Answer 1

Ext JSはこれを具体的に行うための組み込みメソッドを提供していませんが、必要なユーティリティメソッドをすべて提供し、アニメーションをサポートしています。少なくとも、フォームがスクロール可能に設定されていることを確認し、アクティブなタブを設定し、無効なフィールドに焦点を合わせるだけで正しい位置にスクロールできます。私は解決策を示すフィーリンの例を作成しました。

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