3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.ux.statusbar.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.define('Ext.ux.statusbar.ValidationStatus', {
25 extend: 'Ext.Component',
26 requires: ['Ext.util.MixedCollection'],
28 * @cfg {String} errorIconCls
29 * The {@link #iconCls} value to be applied to the status message when there is a
30 * validation error. Defaults to <tt>'x-status-error'</tt>.
32 errorIconCls : 'x-status-error',
34 * @cfg {String} errorListCls
35 * The css class to be used for the error list when there are validation errors.
36 * Defaults to <tt>'x-status-error-list'</tt>.
38 errorListCls : 'x-status-error-list',
40 * @cfg {String} validIconCls
41 * The {@link #iconCls} value to be applied to the status message when the form
42 * validates. Defaults to <tt>'x-status-valid'</tt>.
44 validIconCls : 'x-status-valid',
47 * @cfg {String} showText
48 * The {@link #text} value to be applied when there is a form validation error.
49 * Defaults to <tt>'The form has errors (click for details...)'</tt>.
51 showText : 'The form has errors (click for details...)',
53 * @cfg {String} showText
54 * The {@link #text} value to display when the error list is displayed.
55 * Defaults to <tt>'Click again to hide the error list'</tt>.
57 hideText : 'Click again to hide the error list',
59 * @cfg {String} submitText
60 * The {@link #text} value to be applied when the form is being submitted.
61 * Defaults to <tt>'Saving...'</tt>.
63 submitText : 'Saving...',
67 sb.on('render', function(){
70 this.errors = Ext.create('Ext.util.MixedCollection');
71 this.listAlign = (sb.statusAlign === 'right' ? 'br-tr?' : 'bl-tl?');
74 this.formPanel = Ext.getCmp(this.form);
75 this.basicForm = this.formPanel.getForm();
76 this.startMonitoring();
77 this.basicForm.on('beforeaction', function(f, action){
78 if(action.type === 'submit'){
79 // Ignore monitoring while submitting otherwise the field validation
80 // events cause the status message to reset too early
84 var startMonitor = function(){
87 this.basicForm.on('actioncomplete', startMonitor, this);
88 this.basicForm.on('actionfailed', startMonitor, this);
90 }, this, {single:true});
96 // Grab the statusEl after the first layout.
97 sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});
108 startMonitoring : function() {
109 this.basicForm.getFields().each(function(f){
110 f.on('validitychange', this.onFieldValidation, this);
115 stopMonitoring : function(){
116 this.basicForm.getFields().each(function(f){
117 f.un('validitychange', this.onFieldValidation, this);
122 onDestroy : function(){
123 this.stopMonitoring();
124 this.statusBar.statusEl.un('click', this.onStatusClick, this);
125 this.callParent(arguments);
129 onFieldValidation : function(f, isValid){
133 var msg = f.getErrors()[0];
135 this.errors.add(f.id, {field:f, msg:msg});
137 this.errors.removeAtKey(f.id);
139 this.updateErrorList();
140 if(this.errors.getCount() > 0) {
141 if(this.statusBar.getText() !== this.showText){
142 this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
145 this.statusBar.clearStatus().setIcon(this.validIconCls);
150 updateErrorList : function(){
151 if(this.errors.getCount() > 0){
153 this.errors.each(function(err){
154 msg += ('<li id="x-err-'+ err.field.id +'"><a href="#">' + err.msg + '</a></li>');
156 this.getMsgEl().update(msg+'</ul>');
158 this.getMsgEl().update('');
161 this.getMsgEl().setSize('auto', 'auto');
165 getMsgEl : function(){
167 this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
168 cls: this.errorListCls
171 this.msgEl.on('click', function(e){
172 var t = e.getTarget('li', 10, true);
174 Ext.getCmp(t.id.split('x-err-')[1]).focus();
177 }, this, {stopEvent:true}); // prevent anchor click navigation
183 showErrors : function(){
184 this.updateErrorList();
185 this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration: 300, easing:'easeOut'});
186 this.statusBar.setText(this.hideText);
187 this.formPanel.el.on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
191 hideErrors : function(){
192 var el = this.getMsgEl();
194 el.slideOut('b', {duration: 300, easing:'easeIn'});
195 this.statusBar.setText(this.showText);
197 this.formPanel.el.un('click', this.hideErrors, this);
201 onStatusClick : function(){
202 if(this.getMsgEl().isVisible()){
204 }else if(this.errors.getCount() > 0){