의 ExtJS - 자신의 isValid 및 hasInvalidField 방법 예를 들어

Question

와 컨테이너를 구현의 우리가 세 개의 전화 번호 필드가 있다고 가정 해 보자 방법 : 우리는 contact 항목으로 캡슐화 할 것인지, mobile, home, business을.

전화 번호 필드는 비워 둘 수 있으며, 그렇지 않은 경우 고유 한 유효성 검사가있는 경우 연락처 항목에 적어도 하나의 번호를 제공해야한다는 자체 유효성 검사가 있습니다.

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의 문제를 읽었으므로 한 페이지에 순차적 또는 중첩 된 양식을 피하려고합니다.

또 다른 접근법은 Ext.form.Labelable 및 Ext.form.field.Field mixins로 Ext.container.Container을 확장하는 것일 수 있습니다. 그게 효과가 있니?

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); 
     } 
    }] 
});