examples/docs/source/ValidationStatus.html

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