examples/ux/statusbar/ValidationStatus.js

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