<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-ux-statusbar-ValidationStatus'>/**
|
</span> * A {@link Ext.ux.statusbar.StatusBar} plugin that provides automatic error
|
* notification when the associated form contains validation errors.
|
*/
|
Ext.define('Ext.ux.statusbar.ValidationStatus', {
|
extend: 'Ext.Component',
|
requires: ['Ext.util.MixedCollection'],
|
<span id='Ext-ux-statusbar-ValidationStatus-cfg-errorIconCls'> /**
|
</span> * @cfg {String} errorIconCls
|
* The {@link Ext.ux.statusbar.StatusBar#iconCls iconCls} value to be applied
|
* to the status message when there is a validation error.
|
*/
|
errorIconCls : 'x-status-error',
|
<span id='Ext-ux-statusbar-ValidationStatus-cfg-errorListCls'> /**
|
</span> * @cfg {String} errorListCls
|
* The css class to be used for the error list when there are validation errors.
|
*/
|
errorListCls : 'x-status-error-list',
|
<span id='Ext-ux-statusbar-ValidationStatus-cfg-validIconCls'> /**
|
</span> * @cfg {String} validIconCls
|
* The {@link Ext.ux.statusbar.StatusBar#iconCls iconCls} value to be applied
|
* to the status message when the form validates.
|
*/
|
validIconCls : 'x-status-valid',
|
|
<span id='Ext-ux-statusbar-ValidationStatus-cfg-showText'> /**
|
</span> * @cfg {String} showText
|
* The {@link Ext.ux.statusbar.StatusBar#text text} value to be applied when
|
* there is a form validation error.
|
*/
|
showText : 'The form has errors (click for details...)',
|
<span id='Ext-ux-statusbar-ValidationStatus-cfg-hideText'> /**
|
</span> * @cfg {String} hideText
|
* The {@link Ext.ux.statusbar.StatusBar#text text} value to display when
|
* the error list is displayed.
|
*/
|
hideText : 'Click again to hide the error list',
|
<span id='Ext-ux-statusbar-ValidationStatus-cfg-submitText'> /**
|
</span> * @cfg {String} submitText
|
* The {@link Ext.ux.statusbar.StatusBar#text text} value to be applied when
|
* the form is being submitted.
|
*/
|
submitText : 'Saving...',
|
|
<span id='Ext-ux-statusbar-ValidationStatus-method-init'> // private
|
</span> init : function(sb) {
|
var me = this;
|
|
me.statusBar = sb;
|
sb.on({
|
single: true,
|
scope: me,
|
render: me.onStatusbarRender,
|
beforedestroy: me.destroy
|
});
|
sb.on({
|
click: {
|
element: 'el',
|
fn: me.onStatusClick,
|
scope: me,
|
buffer: 200
|
}
|
});
|
},
|
|
<span id='Ext-ux-statusbar-ValidationStatus-method-onStatusbarRender'> onStatusbarRender: function(sb) {
|
</span> var me = this,
|
startMonitor = function() {
|
me.monitor = true;
|
};
|
|
me.monitor = true;
|
me.errors = Ext.create('Ext.util.MixedCollection');
|
me.listAlign = (sb.statusAlign === 'right' ? 'br-tr?' : 'bl-tl?');
|
|
if (me.form) {
|
me.formPanel = Ext.getCmp(me.form);
|
me.basicForm = me.formPanel.getForm();
|
me.startMonitoring();
|
me.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
|
me.monitor = false;
|
}
|
});
|
me.basicForm.on('actioncomplete', startMonitor);
|
me.basicForm.on('actionfailed', startMonitor);
|
}
|
},
|
|
<span id='Ext-ux-statusbar-ValidationStatus-method-startMonitoring'> // private
|
</span> startMonitoring : function() {
|
this.basicForm.getFields().each(function(f) {
|
f.on('validitychange', this.onFieldValidation, this);
|
}, this);
|
},
|
|
<span id='Ext-ux-statusbar-ValidationStatus-method-stopMonitoring'> // private
|
</span> stopMonitoring : function() {
|
this.basicForm.getFields().each(function(f) {
|
f.un('validitychange', this.onFieldValidation, this);
|
}, this);
|
},
|
|
<span id='Ext-ux-statusbar-ValidationStatus-method-onDestroy'> // private
|
</span> onDestroy : function() {
|
this.stopMonitoring();
|
this.statusBar.statusEl.un('click', this.onStatusClick, this);
|
this.callParent(arguments);
|
},
|
|
<span id='Ext-ux-statusbar-ValidationStatus-method-onFieldValidation'> // private
|
</span> onFieldValidation : function(f, isValid) {
|
var me = this,
|
msg;
|
|
if (!me.monitor) {
|
return false;
|
}
|
msg = f.getErrors()[0];
|
if (msg) {
|
me.errors.add(f.id, {field:f, msg:msg});
|
} else {
|
me.errors.removeAtKey(f.id);
|
}
|
this.updateErrorList();
|
if (me.errors.getCount() > 0) {
|
if (me.statusBar.getText() !== me.showText) {
|
me.statusBar.setStatus({
|
text: me.showText,
|
iconCls: me.errorIconCls
|
});
|
}
|
} else {
|
me.statusBar.clearStatus().setIcon(me.validIconCls);
|
}
|
},
|
|
<span id='Ext-ux-statusbar-ValidationStatus-method-updateErrorList'> // private
|
</span> updateErrorList : function() {
|
var me = this,
|
msg,
|
msgEl = me.getMsgEl();
|
|
if (me.errors.getCount() > 0) {
|
msg = ['<ul>'];
|
this.errors.each(function(err) {
|
msg.push('<li id="x-err-', err.field.id, '"><a href="#">', err.msg, '</a></li>');
|
});
|
msg.push('</ul>');
|
msgEl.update(msg.join(''));
|
} else {
|
msgEl.update('');
|
}
|
// reset msgEl size
|
msgEl.setSize('auto', 'auto');
|
},
|
|
<span id='Ext-ux-statusbar-ValidationStatus-method-getMsgEl'> // private
|
</span> getMsgEl : function() {
|
var me = this,
|
msgEl = me.msgEl,
|
t;
|
|
if (!msgEl) {
|
msgEl = me.msgEl = Ext.DomHelper.append(Ext.getBody(), {
|
cls: me.errorListCls
|
}, true);
|
msgEl.hide();
|
msgEl.on('click', function(e) {
|
t = e.getTarget('li', 10, true);
|
if (t) {
|
Ext.getCmp(t.id.split('x-err-')[1]).focus();
|
me.hideErrors();
|
}
|
}, null, {stopEvent: true}); // prevent anchor click navigation
|
}
|
return msgEl;
|
},
|
|
<span id='Ext-ux-statusbar-ValidationStatus-method-showErrors'> // private
|
</span> showErrors : function() {
|
var me = this;
|
|
me.updateErrorList();
|
me.getMsgEl().alignTo(me.statusBar.getEl(), me.listAlign).slideIn('b', {duration: 300, easing: 'easeOut'});
|
me.statusBar.setText(me.hideText);
|
me.formPanel.body.on('click', me.hideErrors, me, {single:true}); // hide if the user clicks directly into the form
|
},
|
|
<span id='Ext-ux-statusbar-ValidationStatus-method-hideErrors'> // private
|
</span> hideErrors : function() {
|
var el = this.getMsgEl();
|
if (el.isVisible()) {
|
el.slideOut('b', {duration: 300, easing: 'easeIn'});
|
this.statusBar.setText(this.showText);
|
}
|
this.formPanel.body.un('click', this.hideErrors, this);
|
},
|
|
<span id='Ext-ux-statusbar-ValidationStatus-method-onStatusClick'> // private
|
</span> onStatusClick : function() {
|
if (this.getMsgEl().isVisible()) {
|
this.hideErrors();
|
} else if (this.errors.getCount() > 0) {
|
this.showErrors();
|
}
|
}
|
});</pre>
|
</body>
|
</html>
|
