docs/source/ValidationStatus.html

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