ExtJS Customized QuickTip Example
by
Join the DZone community and get the full member experience.
Join For Free
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:
Published at DZone with permission of Tousif Khan, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments