ExtJSには、例えば、独自のisValidとhasInvalidField方法

Question

でコンテナを実装するためにどのように、我々は3つの電話番号フィールドを持っているとしましょう。

電話番号フィールドは空白にすることもできますし、そうでない場合は独自の有効性チェックを行うこともできます。連絡先アイテムには少なくとも1つの番号を入力する必要があるという独自の有効性チェックがあります。

Ext.define('My.widgets.contact', { 
    // To make use of Ext.form.Labelable mixin 
    extend: 'Ext.form.fieldcontainer', 
    xtype: 'contact', 
    alias: 'widget.contact', 
    requires: [ 
     'My.widgets.phone' 
    ], 
    mixins: [ 
     // To link in isValid and other methods 
     'Ext.form.field.Field' 
    ], 
    items: [ 
     { 
      xtype: 'phone', 
      fieldLabel: 'mobile' 
     }, 
     { 
      xtype: 'phone', 
      fieldLabel: 'home' 
     }, 
     { 
      xtype: 'phone', 
      fieldLabel: 'business' 
     } 
    ], 
    isValid: function() { 
     let valid = false; 
     if (this.callParent(arguments)) { 
      for (const item in this.getItems()) { 
       if (item.getValue() != '') { 
        valid = true; 
        break; 
       } 
      } 
     } 
     return valid; 
    } 
}); 

これはこれを行うには正しい方法です：

私はこのような何かをやって考えていますか？

アイデアは余分な毛羽立ちを最小限にすることです。たとえば、フォームパネルにはドッキング可能なボタン、ヘッダー、フッター要素は必要ありません。また、私はExtJSのページ上に複数のフォーム項目を持つ問題について読んだので、1ページに順次フォームやネストされたフォームを避けたい。

Ext.container.ContainerをExt.form.LabelableとExt.form.field.Field mixinsで拡張する方法もあります。それは働くだろうか？

Answer 1

ExtJs fieldcontainerにはqueryというメソッドがありますので、これを使用して検証を確認してください。

Queryは、渡されたセレクタと一致するすべての子孫コンポーネントを取得します。このコンテナをルートとして使用してExt.ComponentQuery.queryを実行します。

this.getItems（）を使用していたので、fieldcontainerのすべての項目が含まれているものとして返されます。この場合、チェックする条件を維持する必要があります。getValue（）フィールドのみ。

クエリは、チェックしたいコンポーネントだけを返します。

Sencha Fiddleデモが作成されました。これはあなたのソリューションを実現するのに役立ちます。

//Custom xtype for phone 
Ext.define('Ext.form.field.Phone', { 
    extend: 'Ext.form.field.Text', 
    alias: 'widget.phone', 
    xtype: 'phone', 
    maskRe: /[\d\.]/, 
    regex: /^\d+(\.\d{1,2})?$/, 
    maxLength: 11, 
    enforceMaxLength: true 
}); 

//Contact details 
Ext.define('ContactForm', { 
    extend: 'Ext.form.FieldContainer', 
    alias: 'widget.contact', 
    xtype: 'contact', 
    flex: 1, 
    layout: 'vbox', 
    defaults: { 
     xtype: 'phone' 
    }, 
    items: [{ 
     fieldLabel: 'mobile' 
    }, { 
     fieldLabel: 'home' 
    }, { 
     fieldLabel: 'business' 
    }], 
    isValid: function() { 
     return this.query('phone[value=""]').length > 0;//you can also use like this { this.query('phone[value!=""]') }; 
    } 
}); 

//Panel this will contain contact 
var panel = Ext.create('Ext.panel.Panel', { 
    itemId: 'myPanel', 
    bodyPadding: 5, 
    width: 300, 
    renderTo: Ext.getBody(), 
    title: 'Contact Details', 
    items: [{ 
     xtype: 'contact' 
    }], 
    buttons: [{ 
     text: 'Submit Details', 
     handler: function() { 
      var contactFrm = this.up('#myPanel').down('contact'), //you also use like this this.up('panel').down('contact') 
       title = 'Success', 
       msg = 'Good you have entered the contact details..!'; 
      if (!contactFrm.isValid()) { 
       title = 'Error'; 
       msg = 'Plese enter at least one contact detail..!' 
      } 
      Ext.Msg.alert(title, msg); 
     } 
    }] 
});