3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
9 * Copyright(c) 2006-2008, Ext JS, LLC.
\r
10 * licensing@extjs.com
\r
12 * http://extjs.com/license
\r
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
21 * Creates a new ValiationStatus plugin
22 * @param {Object} config A config object
24 Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
26 errorIconCls : 'x-status-error',
28 errorListCls : 'x-status-error-list',
30 validIconCls : 'x-status-valid',
32 showText : 'The form has errors (click for details...)',
34 hideText : 'Click again to hide the error list',
36 submitText : 'Saving...',
40 sb.on('render', function(){
43 this.errors = new Ext.util.MixedCollection();
44 this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');
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
56 var startMonitor = function(){
59 this.form.on('actioncomplete', startMonitor, this);
60 this.form.on('actionfailed', startMonitor, this);
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});
70 startMonitoring : function(){
71 this.form.items.each(function(f){
72 f.on('invalid', this.onFieldValidation, this);
73 f.on('valid', this.onFieldValidation, this);
78 stopMonitoring : function(){
79 this.form.items.each(function(f){
80 f.un('invalid', this.onFieldValidation, this);
81 f.un('valid', this.onFieldValidation, this);
86 onDestroy : function(){
87 this.stopMonitoring();
88 this.statusBar.statusEl.un('click', this.onStatusClick, this);
89 Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
93 onFieldValidation : function(f, msg){
98 this.errors.add(f.id, {field:f, msg:msg});
100 this.errors.removeKey(f.id);
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});
108 this.statusBar.clearStatus().setIcon(this.validIconCls);
113 updateErrorList : function(){
114 if(this.errors.getCount() > 0){
116 this.errors.each(function(err){
117 msg += ('<li id="x-err-'+ err.field.id +'"><a href="#">' + err.msg + '</a></li>');
119 this.getMsgEl().update(msg+'</ul>');
121 this.getMsgEl().update('');
126 getMsgEl : function(){
128 this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
129 cls: this.errorListCls+' x-hide-offsets'
132 this.msgEl.on('click', function(e){
133 var t = e.getTarget('li', 10, true);
135 Ext.getCmp(t.id.split('x-err-')[1]).focus();
138 }, this, {stopEvent:true}); // prevent anchor click navigation
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
152 hideErrors : function(){
153 var el = this.getMsgEl();
155 el.slideOut('b', {duration:.2, easing:'easeIn'});
156 this.statusBar.setText(this.showText);
158 this.form.getEl().un('click', this.hideErrors, this);
162 onStatusClick : function(){
163 if(this.getMsgEl().isVisible()){
165 }else if(this.errors.getCount() > 0){