Sencha touche form validation

Question

私は、最初のアプリをSencha Touchで作成しています。 フォームの検証に問題があります。 これは形式です：すべてのフィールドが必要とされている -activities -City -nation

：

var form = new Ext.form.FormPanel({ 
     title: 'Activity', 
     items: [{ 
      xtype: 'fieldset', 
      items: [{ 
       xtype: 'textfield', 
       name : 'sector', 
       label: 'Sector', 
       required: true 
      }, 
      { 
       xtype: 'selectfield', 
       name : 'city', 
       label: 'City', 
       options: [ 
       { 
        text: '*', 
        value: '*' 
       }, 
       { 
        text: 'First Option', 
        value: 'first' 
       }, 
       { 
        text: 'Second Option', 
        value: 'second' 
       }, 
       { 
        text: 'Third Option', 
        value: 'third' 
       }] 
      }, 
      { 
       xtype: 'textfield', 
       name : 'nation', 
       label: 'Nation', 
       required: true 
      }, 
      { 
       xtype: 'toolbar', 
       docked: 'bottom', 
       layout: { 
        pack: 'center' 
       }, 
       items: [{ 
        xtype: 'button', 
        text: 'Cerca', 
        handler: function() { 
         formSettori.submit({ 
          url: 'book.php', 
          method: 'GET', 
          success: function() { 
           Ext.Msg.alert('OK'); 
          }, 
          failure: function() { 
           Ext.Msg.alert('NO'); 
          } 
         }); 
        } 
       }, 
       { 
        xtype: 'button', 
        text: 'Reset', 
        handler: function() { 
         form.reset(); 
        } 
       }] 
      }] 
     }] 
    }); 

フォームは三つのフィールドがあります。都市は*

と同じではありませんが、フィールドを制御するにはどうすればいいですか？ アクティビティと国は空であってはいけません。 ありがとうございます！

Answer 1

フォーム検証を行うための方法は組み込まれていません。あなたは自分でそれをしなければなりません。

最も簡単な方法は、専用のExt.form.PanelメソッドgetFieldsを使用して各フィールドをループし、それらが空でないことを確認することです。フィールドが空の場合

var fields = form.getFields(), 
    field, name, isEmpty; 

for (name in fields) { 
    field = fields[name]; 
    isEmpty = (!field.getValue() || field.getValue() == ""); 

    if (isEmpty) { 
     field.addCls('x-invalid'); 
    } else { 
     field.removeCls('x-invalid'); 
    } 
} 

することは、我々は（あなたがそれをスタイルすることができます）x-invalidクラスを追加します。