Statusbar with validation
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/StatusBar.js"> </script>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/StatusBar.css" />
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
/**
* @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});
sb.on('afterlayout', function(){
// Grab the statusEl after the first layout.
sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});
}, 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();
}
}
});
</script>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.QuickTips.init();
Ext.onReady(function(){
var fp = new Ext.FormPanel({
id: 'status-form',
renderTo: Ext.getBody(),
labelWidth: 75,
width: 350,
buttonAlign: 'right',
border: false,
bodyStyle: 'padding:10px 10px 0;',
defaults: {
anchor: '95%',
allowBlank: false,
selectOnFocus: true,
msgTarget: 'side'
},
items:[{
xtype: 'textfield',
fieldLabel: 'Name',
blankText: 'Name is required'
},{
xtype: 'datefield',
fieldLabel: 'Birthdate',
blankText: 'Birthdate is required'
}],
buttons: [{
text: 'Save',
handler: function(){
if(fp.getForm().isValid()){
var sb = Ext.getCmp('form-statusbar');
sb.showBusy('Saving form...');
fp.getEl().mask();
fp.getForm().submit({
url: 'fake.php',
success: function(){
sb.setStatus({
text:'Form saved!',
iconCls:'',
clear: true
});
fp.getEl().unmask();
}
});
}
}
}]
});
new Ext.Panel({
title: 'StatusBar with Integrated Form Validation',
renderTo: Ext.getBody(),
width: 350,
autoHeight: true,
layout: 'fit',
items: fp,
bbar: new Ext.ux.StatusBar({
id: 'form-statusbar',
defaultText: 'Ready',
plugins: new Ext.ux.ValidationStatus({form:'status-form'})
})
});
});
</script>
<style>
.list {
list-style-image:none;
list-style-position:outside;
list-style-type:square;
padding-left:16px;
}
.list li {
font-size:11px;
padding:3px;
}
</style>
</head>
<body>
<h1>Advanced StatusBar Example</h1>
<p>This is an advanced example of customizing a Ext.ux.StatusBar via a plugin.</p>
<p>Note that the js is not minified so it is readable. See <a href="statusbar-advanced.js">statusbar-advanced.js</a>.</p>
<h2>Customizing the StatusBar</h2>
<p>The <a href="ValidationStatus.js">ValidationStatus</a> plugin hooks into the StatusBar and automatically
monitors the validation status of any fields in the associated FormPanel. Items of interest:</p>
<ul class="list">
<li>The StatusBar syncs in real-time with the valid state of the form as you type</li>
<li>When the form is invalid, the error status message can be clicked to hide/show a custom error list</li>
<li>The error list items can be clicked to focus the associated fields</li>
<li>After submitting successfully, note that the confirmation status message will fade out after 5
seconds and return to the default status (this is a config option)</li>
</ul><br>
</body>
</html>
Related examples in the same category