-/*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
/**
- * @class Ext.ux.ValidationStatus
+ * @class Ext.ux.statusbar.ValidationStatus
* A {@link Ext.StatusBar} plugin that provides automatic error notification when the
* associated form contains validation errors.
* @extends Ext.Component
* Creates a new ValiationStatus plugin
* @param {Object} config A config object
*/
-Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
+Ext.define('Ext.ux.statusbar.ValidationStatus', {
+ extend: 'Ext.Component',
+ requires: ['Ext.util.MixedCollection'],
/**
* @cfg {String} errorIconCls
* The {@link #iconCls} value to be applied to the status message when there is a
sb.on('render', function(){
this.statusBar = sb;
this.monitor = true;
- this.errors = new Ext.util.MixedCollection();
- this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');
+ this.errors = Ext.create('Ext.util.MixedCollection');
+ this.listAlign = (sb.statusAlign === 'right' ? 'br-tr?' : 'bl-tl?');
- if(this.form){
- this.form = Ext.getCmp(this.form).getForm();
+ if (this.form) {
+ this.formPanel = Ext.getCmp(this.form);
+ this.basicForm = this.formPanel.getForm();
this.startMonitoring();
- this.form.on('beforeaction', function(f, action){
- if(action.type == 'submit'){
+ this.basicForm.on('beforeaction', function(f, action){
+ if(action.type === 'submit'){
// Ignore monitoring while submitting otherwise the field validation
// events cause the status message to reset too early
this.monitor = false;
var startMonitor = function(){
this.monitor = true;
};
- this.form.on('actioncomplete', startMonitor, this);
- this.form.on('actionfailed', startMonitor, this);
+ this.basicForm.on('actioncomplete', startMonitor, this);
+ this.basicForm.on('actionfailed', startMonitor, this);
}
}, this, {single:true});
sb.on({
},
// private
- startMonitoring : function(){
- this.form.items.each(function(f){
- f.on('invalid', this.onFieldValidation, this);
- f.on('valid', this.onFieldValidation, this);
+ startMonitoring : function() {
+ this.basicForm.getFields().each(function(f){
+ f.on('validitychange', this.onFieldValidation, this);
}, this);
},
// private
stopMonitoring : function(){
- this.form.items.each(function(f){
- f.un('invalid', this.onFieldValidation, this);
- f.un('valid', this.onFieldValidation, this);
+ this.basicForm.getFields().each(function(f){
+ f.un('validitychange', this.onFieldValidation, this);
}, this);
},
onDestroy : function(){
this.stopMonitoring();
this.statusBar.statusEl.un('click', this.onStatusClick, this);
- Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
+ this.callParent(arguments);
},
// private
- onFieldValidation : function(f, msg){
- if(!this.monitor){
+ onFieldValidation : function(f, isValid){
+ if (!this.monitor) {
return false;
}
- if(msg){
+ var msg = f.getErrors()[0];
+ if (msg) {
this.errors.add(f.id, {field:f, msg:msg});
- }else{
- this.errors.removeKey(f.id);
+ } else {
+ this.errors.removeAtKey(f.id);
}
this.updateErrorList();
- if(this.errors.getCount() > 0){
- if(this.statusBar.getText() != this.showText){
+ if(this.errors.getCount() > 0) {
+ if(this.statusBar.getText() !== this.showText){
this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
}
}else{
// private
updateErrorList : function(){
if(this.errors.getCount() > 0){
- var msg = '<ul>';
- this.errors.each(function(err){
- msg += ('<li id="x-err-'+ err.field.id +'"><a href="#">' + err.msg + '</a></li>');
- }, this);
- this.getMsgEl().update(msg+'</ul>');
+ var msg = '<ul>';
+ this.errors.each(function(err){
+ msg += ('<li id="x-err-'+ err.field.id +'"><a href="#">' + err.msg + '</a></li>');
+ }, this);
+ this.getMsgEl().update(msg+'</ul>');
}else{
this.getMsgEl().update('');
}
+ // reset msgEl size
+ this.getMsgEl().setSize('auto', 'auto');
},
// private
getMsgEl : function(){
if(!this.msgEl){
- this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
- cls: this.errorListCls+' x-hide-offsets'
+ this.msgEl = Ext.core.DomHelper.append(Ext.getBody(), {
+ cls: this.errorListCls
}, true);
-
+ this.msgEl.hide();
this.msgEl.on('click', function(e){
var t = e.getTarget('li', 10, true);
if(t){
// private
showErrors : function(){
this.updateErrorList();
- this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration:0.3, easing:'easeOut'});
+ this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration: 300, easing:'easeOut'});
this.statusBar.setText(this.hideText);
- this.form.getEl().on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
+ this.formPanel.el.on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
},
// private
hideErrors : function(){
var el = this.getMsgEl();
if(el.isVisible()){
- el.slideOut('b', {duration:0.2, easing:'easeIn'});
- this.statusBar.setText(this.showText);
+ el.slideOut('b', {duration: 300, easing:'easeIn'});
+ this.statusBar.setText(this.showText);
}
- this.form.getEl().un('click', this.hideErrors, this);
+ this.formPanel.el.un('click', this.hideErrors, this);
},
// private