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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
Ext.onReady(function () {
Ext.QuickTips.init();
var qTip = “
Follow the below instruction to enter valid username
“ 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: ‘
Please make sure you follows all the form validation instruction to successfully submit the form. ‘ , 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:
Source techzoo.org
