如何獲取Ext JS中提交事件的粒子字段驗證？

以下是我的代碼。我得到兩個fieldset每個包含一些文本框和一個按鈕。我只想驗證屬於該字段集的按鈕點擊上的字段。如何獲取Ext JS中提交事件的粒子字段驗證？

例如，有兩種選擇：發送短信和發送電子郵件。每個選項都有一個發送按鈕。如果我想發送短信或電子郵件，那麼我不想驗證所有字段。這意味着如果我想發送電子郵件，那麼我只想驗證電子郵件文本字段，而不是單擊電子郵件發送按鈕上的短信的字段。

以下是我的代碼。你可以更好地理解。

this.form = new Ext.form.Panel({ 
      margin: '10 100 10 100', 
      xtype: 'panel', 
      border: true, 
      layout: 'hbox', 
      padding: '2 2 2 2', 
      items: [{ 
       xtype: 'fieldset', 
       flex: 1, 
       layout: 'anchor', 
       title: 'Send Email', 
       //collapsible: true, 
       //collapsed: true, 
       border: false, 
       defaults: { anchor: '100%' }, 

       items: [{ 
        xtype: 'textfield', 
        name: 'txtRecipients', 
        allowBlank: false, 
        //fieldLabel: 'Last Name', 
        emptyText: 'Recipients email address', 
        padding: '2 2 2 2 ' 
       }, 
       { 
        xtype: 'textfield', 
        name: 'txtSubject', 
        allowBlank: false, 
        //fieldLabel: 'Last Name', 
        emptyText: 'Subject', 
        padding: '2 2 2 2 ' 
       }, 
       { 
        xtype: 'textareafield', 
        name: 'txtMessage', 
        allowBlank: false, 
        //fieldLabel: 'Last Name', 
        emptyText: 'Type your message here', 
        padding: '2 2 2 2 ', 
        rows: 4 

       }, 
       { 
        xtype: 'container', 
        items: [ 
         { 
          xtype: 'button', 
          margin: '0 0 0 0', 
          text: 'Send', 
          width: 80, 
          height: 30, 
          handler: function() { 
          } 
         } 
        ] 
       }] 

      }, 
      { 
       xtype: 'fieldset', 
       flex: 1, 
       layout: 'anchor', 
       title: 'Send SMS', 
       //collapsible: true, 
       //collapsed: true, 
       border: false, 
       defaults: { anchor: '100%' }, 

       items: [{ 
        xtype: 'textfield', 
        name: 'txtRecipients', 
        allowBlank: false, 
        //fieldLabel: 'Last Name', 
        emptyText: 'Contact Numbers seperated by comma(,)', 
        padding: '2 2 2 2 ' 
       }, 
       { 
        xtype: 'textareafield', 
        name: 'txt1Message', 
        allowBlank: false, 
        //fieldLabel: 'Last Name', 
        emptyText: 'Type your message here', 
        padding: '2 2 2 2 ', 
        rows: 3 

       }, 
       { 
        xtype: 'tbspacer', 
        height: 45 
       }, 
       { 
        xtype: 'container', 
        items: [ 
         { 
          xtype: 'button', 
          margin: '0 0 0 0', 
          text: 'Send', 
          width: 80, 
          height: 30, 
          handler: function() { 
          } 
         } 
        ] 
       }] 

      }] 
     });

來源

2017-02-04 Vikas Hire

您需要爲每個按鈕添加一個特定的功能。在每個角色中，您將必要的驗證添加到電子郵件或SMS中。

例子：

this.form = new Ext.form.Panel({ 
    margin: '10 100 10 100', 
    xtype: 'panel', 
    border: true, 
    layout: 'hbox', 
    padding: '2 2 2 2', 
    items: [{ 
      xtype: 'fieldset', 
      flex: 1, 
      layout: 'anchor', 
      title: 'Send Email', 
      //collapsible: true, 
      //collapsed: true, 
      border: false, 
      defaults: { 
       anchor: '100%' 
      }, 
      items: [{ 
        xtype: 'textfield', 
        name: 'txtRecipients', 
        allowBlank: false, 
        //fieldLabel: 'Last Name', 
        emptyText: 'Recipients email address', 
        padding: '2 2 2 2 ' 
       }, 
       { 
        xtype: 'textfield', 
        name: 'txtSubject', 
        allowBlank: false, 
        //fieldLabel: 'Last Name', 
        emptyText: 'Subject', 
        padding: '2 2 2 2 ' 
       }, 
       { 
        xtype: 'textareafield', 
        name: 'txtMessage', 
        allowBlank: false, 
        //fieldLabel: 'Last Name', 
        emptyText: 'Type your message here', 
        padding: '2 2 2 2 ', 
        rows: 4 

       }, 
       { 
        xtype: 'container', 
        items: [{ 
         xtype: 'button', 
         margin: '0 0 0 0', 
         text: 'Send', 
         width: 80, 
         height: 30, 
         handler: function() { 
          check_email(); 
         } 
        }] 
       } 
      ] 
     }, 
     { 
      xtype: 'fieldset', 
      flex: 1, 
      layout: 'anchor', 
      title: 'Send SMS', 
      //collapsible: true, 
      //collapsed: true, 
      border: false, 
      defaults: { 
       anchor: '100%' 
      }, 
      items: [{ 
        xtype: 'textfield', 
        name: 'txtRecipients', 
        allowBlank: false, 
        //fieldLabel: 'Last Name', 
        emptyText: 'Contact Numbers seperated by comma(,)', 
        padding: '2 2 2 2 ' 
       }, 
       { 
        xtype: 'textareafield', 
        name: 'txt1Message', 
        allowBlank: false, 
        //fieldLabel: 'Last Name', 
        emptyText: 'Type your message here', 
        padding: '2 2 2 2 ', 
        rows: 3 

       }, 
       { 
        xtype: 'tbspacer', 
        height: 45 
       }, 
       { 
        xtype: 'container', 
        items: [{ 
         xtype: 'button', 
         margin: '0 0 0 0', 
         text: 'Send', 
         width: 80, 
         height: 30, 
         handler: function() { 
          check_sms(); 
         } 
        }] 
       } 
      ] 
     } 
    ] 
}); 

function check_email(){ 
    // Here you do a validation of the E-mail fields 
} 

function check_sms(){ 
    // Here you do a validation of the SMS fields 
}

來源

2017-02-05 17:30:51

你可以改變字段集的xtype形成。這樣您就可以直接驗證並分別獲取SMS和電子郵件的值。

來源

2017-02-18 20:10:45 sandeep

如何獲取Ext JS中提交事件的粒子字段驗證？

回答

相關問題