Sencha Touch 2.1 - validation de formulaire en utilisant le modèle

Question

Je suis nouveau sur Sencha Touch et je tente de valider le formulaire de connexion. J'ai un modèle simple d'utilisateur avec deux champs: email, mot de passe. J'ai créé des règles de messages avec des validations:

Ext.define('FirstApp.model.User', { 
    extend : 'Ext.data.Model', 
    config : { 
     fields : [{ 
      name : 'email', 
      type : 'string' 
     }, { 
      name : 'password', 
      type : 'password' 
     }], 

     validations : [{ 
      type : 'presence', 
      name : 'email', 
      message : "Enter email" 
     }, { 
      type : 'presence', 
      name : 'password', 
      message : "Enter Password" 
     }, { 
      type : 'format', 
      name : 'email', 
      matcher : /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, 
      message : "Wrong Email Format" 
     }] 
    } 
}); 

Vu LoginForm Je voudrais valider le formulaire de connexion, mais quand mauvais paramètres ont été entrés, la fenêtre d'alerte montre non définie à la place des messages. Après avoir entré le formulaire de données correct est envoyé. Ici vous pouvez voir le code de LoginForm:

Ext.define('FirstApp.view.login.LoginForm', { 
    extend : 'Ext.form.FormPanel', 
    xtype : 'loginpanel', 
    requires : ['Ext.form.FieldSet', 'FirstApp.model.User', 'Ext.field.Email', 'Ext.field.Password'], 

    config : { 
     title : 'LOGIN', 
     scrollable : 'vertical', 
     items : [{ 
      xtype : 'fieldset', 
      title : 'Login', 
      defaults : { 
       required : true, 
      }, 
      items : [{ 
       xtype : 'emailfield', 
       name : 'email', 
       placeHolder : 'Email' 
      }, { 
       xtype : 'passwordfield', 
       name : 'password', 
       placeHolder : 'Password' 
      }] 
     }, { 
      xtype : 'button', 
      text : 'Log in', 
      ui : 'confirm', 
      handler : function() { 
       var model = Ext.ModelMgr.create(this.up('formpanel').getValues(), 'FirstApp.model.User'); 

       var errors = model.validate(); console.log(errors); 
       var message = ''; 

       if (errors.isValid()){ 
        // Validation successful - show loader 
        Ext.Viewport.setMasked({ 
         xtype:'loadmask', 
         message:'Logging in...' 
        }); 
        // Login 
        this.up('formpanel').submit({ 
         url: 'http://localhost/firstappweb/www/en/?do=login', 
         method: 'POST', 
         success: function(form, result) { 
          console.log(result); 
          Ext.Viewport.setMasked(false); 
         }, 
         failure: function(form, result) { 
          console.log(result); 
          Ext.Viewport.setMasked(false); 
         }      
        }); 

       } else { 
        // Validation failed 
        console.log(errors.items); 
        Ext.each(errors.items, function(rec, i) { 
         message += rec.message+"<br />"; 
        }); 
        Ext.Msg.alert("Validate", message, function(){}); 
        return false; 
       } 
      } 
     }, { 
      // Do not log in 
      xtype : 'toolbar', 
      docked : 'bottom', 
      layout : { 
       pack : 'center' 
      }, 
      items : [{ 
       xtype : 'button', 
       text : 'Do not log in', 
       handler : function() { 
        Ext.Msg.alert("You do not want to log in?", 'Shame on you!', function() { 
        }); 
        // this.push(); 
       } 
      }] 
     }] 
    } 
}); 

Merci de l'aide à l'avance.

Answer 1

Je suppose que vous avez fait depuis console.log de errors.items vous devez avoir vu la valeur rec.message à l'aide débogueur pour comprendre pourquoi est-il défini.

c'est Anyways comment je ferais:

var data=""; 
errors.each(function (item, index, length) { 
    // Each item in the errors collection is an instance of the Ext.data.Error class. 
    data = data + '|'+item.getField()+' - '+ item.getMessage() +'|'; 
}); 
Ext.Msg.alert("Validation Failed", data);