ExtJS comes with a singleton class Ext.QuickTips (alternate name: Ext.tip.QuickTipManager) which provides attractive and customizable tooltips for any element. The QuickTips singleton is used to configure and manage tooltips globally for multiple elements in a generic manner.
Today I am going to demonstrate how we can use this QuickTips to create a customized instruction text which will help our user to enter valid form data in form text field.
To demonstrate this, I am creating a simple login form and n this form we will place a instruction text with image (displayfield component of Ext library), on click or hover of that image we will display a customized Ext.QuickTip with field validation instructions.
Ext.onReady(function () {
Ext.QuickTips.init();
var qTip = "<p style='color:blue;font-weight:bold;'>Follow the below instruction to enter valid username</p><dl><dt><b style='color:red;'>Lenght:</b></dt><dd>- Minimum: 4 char</dd><dd>- Maximun: 12 char</dd><dt><b style='color:red;'>Character:</b></dt><dd>- Atleast one numeric char</dd><dd>- Special char not allowed</dd>";
Ext.create('Ext.form.Panel', {
width: 400,
frame: true,
title: 'Login Form - TechZoo',
padding: 10,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '98%'
},
items: [{
xtype: 'displayfield',
value: '<p>Please make sure you follows all the form validation instruction to successfully submit the form.<img id= "questionQTip" src="images/question_white.png" /></p>',
afterRender: function() {
var me = this;
me.mon(Ext.get('questionQTip'),
'click',
function(e,t) {e.stopEvent();},
me
);
},
listeners: {
afterrender: function(me, e){
Ext.QuickTips.register({
dismissDelay: 5000,
target: 'questionQTip',
text : qTip,
cls : 'qBodyStyle',
width : 200
});
Ext.get('questionQTip').dom.style.cursor = 'help';
}
}
},{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
items: [{
xtype: 'tbfill'
},{
text: 'Cancel'
},{
text: 'Submit Form'
}]
}],
renderTo: 'output'
});
});
Click of mouseover to question image and you will see following output.
Output:
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}