ExtJS Customized QuickTip Example
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.
Trending
-
Building a Flask Web Application With Docker: A Step-by-Step Guide
-
Observability Architecture: Financial Payments Introduction
-
Reactive Programming
-
Auditing Tools for Kubernetes
Comments