+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
+ * Ext JS Library 2.2\r
+ * Copyright(c) 2006-2008, Ext JS, LLC.\r
* licensing@extjs.com\r
* \r
* http://extjs.com/license\r
*/\r
\r
-/**\r
- * @class Ext.ux.ValidationStatus\r
- * A {@link Ext.StatusBar} plugin that provides automatic error notification when the\r
- * associated form contains validation errors.\r
- * @extends Ext.Component\r
- * @constructor\r
- * Creates a new ValiationStatus plugin\r
- * @param {Object} config A config object\r
- */\r
-Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {\r
- \r
- errorIconCls : 'x-status-error',\r
- \r
- errorListCls : 'x-status-error-list',\r
- \r
- validIconCls : 'x-status-valid',\r
- \r
- showText : 'The form has errors (click for details...)',\r
- \r
- hideText : 'Click again to hide the error list',\r
- \r
- submitText : 'Saving...',\r
- \r
- // private\r
- init : function(sb){\r
- sb.on('render', function(){\r
- this.statusBar = sb;\r
- this.monitor = true;\r
- this.errors = new Ext.util.MixedCollection();\r
- this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');\r
- \r
- if(this.form){\r
- this.form = Ext.getCmp(this.form).getForm();\r
- this.startMonitoring();\r
- \r
- // Have to give the status bar time to render since it happens in afterRender\r
- (function(){\r
- sb.statusEl.on('click', this.onStatusClick, this, {buffer:200});\r
- }).defer(200, this);\r
- \r
- this.form.on('beforeaction', function(f, action){\r
- if(action.type == 'submit'){\r
- // Ignore monitoring while submitting otherwise the field validation\r
- // events cause the status message to reset too early\r
- this.monitor = false;\r
- }\r
- }, this);\r
- var startMonitor = function(){\r
- this.monitor = true;\r
- }\r
- this.form.on('actioncomplete', startMonitor, this);\r
- this.form.on('actionfailed', startMonitor, this);\r
- }\r
+/**
+ * @class Ext.ux.ValidationStatus
+ * A {@link Ext.StatusBar} plugin that provides automatic error notification when the
+ * associated form contains validation errors.
+ * @extends Ext.Component
+ * @constructor
+ * Creates a new ValiationStatus plugin
+ * @param {Object} config A config object
+ */
+Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
+
+ errorIconCls : 'x-status-error',
+
+ errorListCls : 'x-status-error-list',
+
+ validIconCls : 'x-status-valid',
+
+ showText : 'The form has errors (click for details...)',
+
+ hideText : 'Click again to hide the error list',
+
+ submitText : 'Saving...',
+
+ // private
+ init : function(sb){
+ 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?');
+
+ if(this.form){
+ this.form = Ext.getCmp(this.form).getForm();
+ this.startMonitoring();
+ this.form.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;
+ }
+ }, this);
+ var startMonitor = function(){
+ this.monitor = true;
+ }
+ this.form.on('actioncomplete', startMonitor, this);
+ this.form.on('actionfailed', startMonitor, this);
+ }
}, this, {single:true});\r
- },\r
- \r
- // private\r
- startMonitoring : function(){\r
- this.form.items.each(function(f){\r
- f.on('invalid', this.onFieldValidation, this);\r
- f.on('valid', this.onFieldValidation, this);\r
- }, this);\r
- },\r
- \r
- // private\r
- stopMonitoring : function(){\r
- this.form.items.each(function(f){\r
- f.un('invalid', this.onFieldValidation, this);\r
- f.un('valid', this.onFieldValidation, this);\r
- }, this);\r
- },\r
- \r
- // private\r
- onDestroy : function(){\r
- this.stopMonitoring();\r
- this.statusBar.statusEl.un('click', this.onStatusClick, this);\r
- Ext.ux.ValidationStatus.superclass.onDestroy.call(this);\r
- },\r
- \r
- // private\r
- onFieldValidation : function(f, msg){\r
- if(!this.monitor){\r
- return false;\r
- }\r
- if(msg){\r
- this.errors.add(f.id, {field:f, msg:msg});\r
- }else{\r
- this.errors.removeKey(f.id);\r
- }\r
- this.updateErrorList();\r
- if(this.errors.getCount() > 0){\r
- if(this.statusBar.getText() != this.showText){\r
- this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});\r
- }\r
- }else{\r
- this.statusBar.clearStatus().setIcon(this.validIconCls);\r
- }\r
- },\r
- \r
- // private\r
- updateErrorList : function(){\r
- if(this.errors.getCount() > 0){\r
- var msg = '<ul>';\r
- this.errors.each(function(err){\r
- msg += ('<li id="x-err-'+ err.field.id +'"><a href="#">' + err.msg + '</a></li>');\r
- }, this);\r
- this.getMsgEl().update(msg+'</ul>');\r
- }else{\r
- this.getMsgEl().update('');\r
- }\r
- },\r
- \r
- // private\r
- getMsgEl : function(){\r
- if(!this.msgEl){\r
- this.msgEl = Ext.DomHelper.append(Ext.getBody(), {\r
- cls: this.errorListCls+' x-hide-offsets'\r
- }, true);\r
- \r
- this.msgEl.on('click', function(e){\r
- var t = e.getTarget('li', 10, true);\r
- if(t){\r
- Ext.getCmp(t.id.split('x-err-')[1]).focus();\r
- this.hideErrors();\r
- }\r
- }, this, {stopEvent:true}); // prevent anchor click navigation\r
- }\r
- return this.msgEl;\r
- },\r
- \r
- // private\r
- showErrors : function(){\r
- this.updateErrorList();\r
- this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration:.3, easing:'easeOut'});\r
- this.statusBar.setText(this.hideText);\r
- this.form.getEl().on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form\r
- },\r
- \r
- // private\r
- hideErrors : function(){\r
- var el = this.getMsgEl();\r
- if(el.isVisible()){\r
- el.slideOut('b', {duration:.2, easing:'easeIn'});\r
- this.statusBar.setText(this.showText);\r
- }\r
- this.form.getEl().un('click', this.hideErrors, this);\r
- },\r
- \r
- // private\r
- onStatusClick : function(){\r
- if(this.getMsgEl().isVisible()){\r
- this.hideErrors();\r
- }else if(this.errors.getCount() > 0){\r
- this.showErrors();\r
- }\r
- }\r
+ sb.on('afterlayout', function(){\r
+ // Grab the statusEl after the first layout.\r
+ sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});\r
+ }, this, {single: true});
+ },
+
+ // private
+ startMonitoring : function(){
+ this.form.items.each(function(f){
+ f.on('invalid', this.onFieldValidation, this);
+ f.on('valid', 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);
+ },
+
+ // private
+ onDestroy : function(){
+ this.stopMonitoring();
+ this.statusBar.statusEl.un('click', this.onStatusClick, this);
+ Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
+ },
+
+ // private
+ onFieldValidation : function(f, msg){
+ if(!this.monitor){
+ return false;
+ }
+ if(msg){
+ this.errors.add(f.id, {field:f, msg:msg});
+ }else{
+ this.errors.removeKey(f.id);
+ }
+ this.updateErrorList();
+ if(this.errors.getCount() > 0){
+ if(this.statusBar.getText() != this.showText){
+ this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
+ }
+ }else{
+ this.statusBar.clearStatus().setIcon(this.validIconCls);
+ }
+ },
+
+ // 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>');
+ }else{
+ this.getMsgEl().update('');
+ }
+ },
+
+ // private
+ getMsgEl : function(){
+ if(!this.msgEl){
+ this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
+ cls: this.errorListCls+' x-hide-offsets'
+ }, true);
+
+ this.msgEl.on('click', function(e){
+ var t = e.getTarget('li', 10, true);
+ if(t){
+ Ext.getCmp(t.id.split('x-err-')[1]).focus();
+ this.hideErrors();
+ }
+ }, this, {stopEvent:true}); // prevent anchor click navigation
+ }
+ return this.msgEl;
+ },
+
+ // private
+ showErrors : function(){
+ this.updateErrorList();
+ this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration:.3, 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
+ },
+
+ // private
+ hideErrors : function(){
+ var el = this.getMsgEl();
+ if(el.isVisible()){
+ el.slideOut('b', {duration:.2, easing:'easeIn'});
+ this.statusBar.setText(this.showText);
+ }
+ this.form.getEl().un('click', this.hideErrors, this);
+ },
+
+ // private
+ onStatusClick : function(){
+ if(this.getMsgEl().isVisible()){
+ this.hideErrors();
+ }else if(this.errors.getCount() > 0){
+ this.showErrors();
+ }
+ }
});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff