Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / ux / statusbar / ValidationStatus.js

diff --git a/examples/ux/statusbar/ValidationStatus.js b/examples/ux/statusbar/ValidationStatus.js
index 7b1baaf..159ea20 100644 (file)
--- a/examples/ux/statusbar/ValidationStatus.js
+++ b/examples/ux/statusbar/ValidationStatus.js
@@ -1,11 +1,5 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.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
@@ -13,7 +7,9 @@
  * 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
@@ -57,14 +53,15 @@ Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
         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;
@@ -73,8 +70,8 @@ Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
                 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({
@@ -94,18 +91,16 @@ Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
     },
     
     // 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);
     },
     
@@ -113,22 +108,23 @@ Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
     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{
@@ -139,23 +135,25 @@ Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
     // 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){
@@ -170,19 +168,19 @@ Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
     // 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