docs/source/ValidationStatus.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">/*\r
   9  * Ext JS Library 2.2\r
  10  * Copyright(c) 2006-2008, Ext JS, LLC.\r
  11  * licensing@extjs.com\r
  12  * \r
  13  * http://extjs.com/license\r
  14  */\r
  15 \r
  16 <div id="cls-Ext.ux.ValidationStatus"></div>/**
  17  * @class Ext.ux.ValidationStatus
  18  * A {@link Ext.StatusBar} plugin that provides automatic error notification when the
  19  * associated form contains validation errors.
  20  * @extends Ext.Component
  21  * @constructor
  22  * Creates a new ValiationStatus plugin
  23  * @param {Object} config A config object
  24  */
  25 Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
  26
  27     errorIconCls : 'x-status-error',
  28
  29     errorListCls : 'x-status-error-list',
  30
  31     validIconCls : 'x-status-valid',
  32
  33     showText : 'The form has errors (click for details...)',
  34
  35     hideText : 'Click again to hide the error list',
  36
  37     submitText : 'Saving...',
  38
  39     // private
  40     init : function(sb){
  41         sb.on('render', function(){
  42             this.statusBar = sb;
  43             this.monitor = true;
  44             this.errors = new Ext.util.MixedCollection();
  45             this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');
  46
  47             if(this.form){
  48                 this.form = Ext.getCmp(this.form).getForm();
  49                 this.startMonitoring();
  50                 this.form.on('beforeaction', function(f, action){
  51                     if(action.type == 'submit'){
  52                         // Ignore monitoring while submitting otherwise the field validation
  53                         // events cause the status message to reset too early
  54                         this.monitor = false;
  55                     }
  56                 }, this);
  57                 var startMonitor = function(){
  58                     this.monitor = true;
  59                 }
  60                 this.form.on('actioncomplete', startMonitor, this);
  61                 this.form.on('actionfailed', startMonitor, this);
  62             }
  63         }, this, {single:true});\r
  64         sb.on('afterlayout', function(){\r
  65             // Grab the statusEl after the first layout.\r
  66             sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});\r
  67         }, this, {single: true});
  68     },
  69
  70     // private
  71     startMonitoring : function(){
  72         this.form.items.each(function(f){
  73             f.on('invalid', this.onFieldValidation, this);
  74             f.on('valid', this.onFieldValidation, this);
  75         }, this);
  76     },
  77
  78     // private
  79     stopMonitoring : function(){
  80         this.form.items.each(function(f){
  81             f.un('invalid', this.onFieldValidation, this);
  82             f.un('valid', this.onFieldValidation, this);
  83         }, this);
  84     },
  85
  86     // private
  87     onDestroy : function(){
  88         this.stopMonitoring();
  89         this.statusBar.statusEl.un('click', this.onStatusClick, this);
  90         Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
  91     },
  92
  93     // private
  94     onFieldValidation : function(f, msg){
  95         if(!this.monitor){
  96             return false;
  97         }
  98         if(msg){
  99             this.errors.add(f.id, {field:f, msg:msg});
 100         }else{
 101             this.errors.removeKey(f.id);
 102         }
 103         this.updateErrorList();
 104         if(this.errors.getCount() > 0){
 105             if(this.statusBar.getText() != this.showText){
 106                 this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
 107             }
 108         }else{
 109             this.statusBar.clearStatus().setIcon(this.validIconCls);
 110         }
 111     },
 112
 113     // private
 114     updateErrorList : function(){
 115         if(this.errors.getCount() > 0){
 116                 var msg = '<ul>';
 117                 this.errors.each(function(err){
 118                     msg += ('<li id="x-err-'+ err.field.id +'"><a href="#">' + err.msg + '</a></li>');
 119                 }, this);
 120                 this.getMsgEl().update(msg+'</ul>');
 121         }else{
 122             this.getMsgEl().update('');
 123         }
 124     },
 125
 126     // private
 127     getMsgEl : function(){
 128         if(!this.msgEl){
 129             this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
 130                 cls: this.errorListCls+' x-hide-offsets'
 131             }, true);
 132
 133             this.msgEl.on('click', function(e){
 134                 var t = e.getTarget('li', 10, true);
 135                 if(t){
 136                     Ext.getCmp(t.id.split('x-err-')[1]).focus();
 137                     this.hideErrors();
 138                 }
 139             }, this, {stopEvent:true}); // prevent anchor click navigation
 140         }
 141         return this.msgEl;
 142     },
 143
 144     // private
 145     showErrors : function(){
 146         this.updateErrorList();
 147         this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration:.3, easing:'easeOut'});
 148         this.statusBar.setText(this.hideText);
 149         this.form.getEl().on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
 150     },
 151
 152     // private
 153     hideErrors : function(){
 154         var el = this.getMsgEl();
 155         if(el.isVisible()){
 156                 el.slideOut('b', {duration:.2, easing:'easeIn'});
 157                 this.statusBar.setText(this.showText);
 158         }
 159         this.form.getEl().un('click', this.hideErrors, this);
 160     },
 161
 162     // private
 163     onStatusClick : function(){
 164         if(this.getMsgEl().isVisible()){
 165             this.hideErrors();
 166         }else if(this.errors.getCount() > 0){
 167             this.showErrors();
 168         }
 169     }
 170 });</pre>    \r
 171 </body>\r
 172 </html>