ExtJS的 - 如何實現與自己的isValid和hasInvalidField方法

Question

例如一個容器中，讓我們說我們有三個電話號碼字段：mobile，home，business，我們要封裝的contact項目。

電話號碼字段可以是空白的，如果沒有，則有其自己的有效性檢查，聯繫人項目具有其自己的有效性檢查，因爲必須提供至少一個號碼。

我在考慮做這樣的事情：

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.container.Container與Ext.form.Labelable和Ext.form.field.Field mixin一起擴展。這會起作用嗎？

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