examples/statusbar/ValidationStatus.js

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