3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
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
13 * Creates a new ValiationStatus plugin
14 * @param {Object} config A config object
16 Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
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>.
22 errorIconCls : 'x-status-error',
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>.
28 errorListCls : 'x-status-error-list',
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>.
34 validIconCls : 'x-status-valid',
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>.
41 showText : 'The form has errors (click for details...)',
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>.
47 hideText : 'Click again to hide the error list',
49 * @cfg {String} submitText
50 * The {@link #text} value to be applied when the form is being submitted.
51 * Defaults to <tt>'Saving...'</tt>.
53 submitText : 'Saving...',
57 sb.on('render', function(){
60 this.errors = new Ext.util.MixedCollection();
61 this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');
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
73 var startMonitor = function(){
76 this.form.on('actioncomplete', startMonitor, this);
77 this.form.on('actionfailed', startMonitor, this);
79 }, this, {single:true});
85 // Grab the statusEl after the first layout.
86 sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});
97 startMonitoring : function(){
98 this.form.items.each(function(f){
99 f.on('invalid', this.onFieldValidation, this);
100 f.on('valid', this.onFieldValidation, this);
105 stopMonitoring : function(){
106 this.form.items.each(function(f){
107 f.un('invalid', this.onFieldValidation, this);
108 f.un('valid', this.onFieldValidation, this);
113 onDestroy : function(){
114 this.stopMonitoring();
115 this.statusBar.statusEl.un('click', this.onStatusClick, this);
116 Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
120 onFieldValidation : function(f, msg){
125 this.errors.add(f.id, {field:f, msg:msg});
127 this.errors.removeKey(f.id);
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});
135 this.statusBar.clearStatus().setIcon(this.validIconCls);
140 updateErrorList : function(){
141 if(this.errors.getCount() > 0){
143 this.errors.each(function(err){
144 msg += ('<li id="x-err-'+ err.field.id +'"><a href="#">' + err.msg + '</a></li>');
146 this.getMsgEl().update(msg+'</ul>');
148 this.getMsgEl().update('');
153 getMsgEl : function(){
155 this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
156 cls: this.errorListCls+' x-hide-offsets'
159 this.msgEl.on('click', function(e){
160 var t = e.getTarget('li', 10, true);
162 Ext.getCmp(t.id.split('x-err-')[1]).focus();
165 }, this, {stopEvent:true}); // prevent anchor click navigation
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
179 hideErrors : function(){
180 var el = this.getMsgEl();
182 el.slideOut('b', {duration:0.2, easing:'easeIn'});
183 this.statusBar.setText(this.showText);
185 this.form.getEl().un('click', this.hideErrors, this);
189 onStatusClick : function(){
190 if(this.getMsgEl().isVisible()){
192 }else if(this.errors.getCount() > 0){