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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
<div id="cls-Ext.QuickTips"></div>/**
* @class Ext.QuickTips
* <p>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. To create individual tooltips with maximum customizability,
* you should consider either {@link Ext.Tip} or {@link Ext.ToolTip}.</p>
* <p>Quicktips can be configured via tag attributes directly in markup, or by
* registering quick tips programmatically via the {@link #register} method.</p>
* <p>The singleton's instance of {@link Ext.QuickTip} is available via
* {@link #getQuickTip}, and supports all the methods, and all the all the
* configuration properties of Ext.QuickTip. These settings will apply to all
* tooltips shown by the singleton.</p>
* <p>Below is the summary of the configuration properties which can be used.
* For detailed descriptions see the config options for the {@link Ext.QuickTip QuickTip} class</p>
* <p><b>QuickTips singleton configs (all are optional)</b></p>
* <div class="mdetail-params"><ul><li>dismissDelay</li>
* <li>hideDelay</li>
* <li>maxWidth</li>
* <li>minWidth</li>
* <li>showDelay</li>
* <li>trackMouse</li></ul></div>
* <p><b>Target element configs (optional unless otherwise noted)</b></p>
* <div class="mdetail-params"><ul><li>autoHide</li>
* <li>cls</li>
* <li>dismissDelay (overrides singleton value)</li>
* <li>target (required)</li>
* <li>text (required)</li>
* <li>title</li>
* <li>width</li></ul></div>
* <p>Here is an example showing how some of these config options could be used:</p>
* <pre><code>
// Init the singleton. Any tag-based quick tips will start working.
Ext.QuickTips.init();
// Apply a set of config properties to the singleton
Ext.apply(Ext.QuickTips.getQuickTip(), {
maxWidth: 200,
minWidth: 100,
showDelay: 50, // Show 50ms after entering target
trackMouse: true
});
// Manually register a quick tip for a specific element
Ext.QuickTips.register({
target: 'my-div',
title: 'My Tooltip',
text: 'This tooltip was added in code',
width: 100,
dismissDelay: 10000 // Hide after 10 seconds hover
});
</code></pre>
* <p>To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with
* the <b>ext:</b> namespace. The HTML element itself is automatically set as the quick tip target. Here is the summary
* of supported attributes (optional unless otherwise noted):</p>
* <ul><li><b>hide</b>: Specifying "user" is equivalent to setting autoHide = false. Any other value will be the
* same as autoHide = true.</li>
* <li><b>qclass</b>: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).</li>
* <li><b>qtip (required)</b>: The quick tip text (equivalent to the 'text' target element config).</li>
* <li><b>qtitle</b>: The quick tip title (equivalent to the 'title' target element config).</li>
* <li><b>qwidth</b>: The quick tip width (equivalent to the 'width' target element config).</li></ul>
* <p>Here is an example of configuring an HTML element to display a tooltip from markup:</p>
* <pre><code>
// Add a quick tip to an HTML button
<input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
ext:qtip="This is a quick tip from markup!"></input>
</code></pre>
* @singleton
*/
Ext.QuickTips = function(){
var tip,
disabled = false;
return {
<div id="method-Ext.QuickTips-init"></div>/**
* Initialize the global QuickTips instance and prepare any quick tips.
* @param {Boolean} autoRender True to render the QuickTips container immediately to preload images. (Defaults to true)
*/
init : function(autoRender){
if(!tip){
if(!Ext.isReady){
Ext.onReady(function(){
Ext.QuickTips.init(autoRender);
});
return;
}
tip = new Ext.QuickTip({
elements:'header,body',
disabled: disabled
});
if(autoRender !== false){
tip.render(Ext.getBody());
}
}
},
// Protected method called by the dd classes
ddDisable : function(){
// don't disable it if we don't need to
if(tip && !disabled){
tip.disable();
}
},
// Protected method called by the dd classes
ddEnable : function(){
// only enable it if it hasn't been disabled
if(tip && !disabled){
tip.enable();
}
},
<div id="method-Ext.QuickTips-enable"></div>/**
* Enable quick tips globally.
*/
enable : function(){
if(tip){
tip.enable();
}
disabled = false;
},
<div id="method-Ext.QuickTips-disable"></div>/**
* Disable quick tips globally.
*/
disable : function(){
if(tip){
tip.disable();
}
disabled = true;
},
<div id="method-Ext.QuickTips-isEnabled"></div>/**
* Returns true if quick tips are enabled, else false.
* @return {Boolean}
*/
isEnabled : function(){
return tip !== undefined && !tip.disabled;
},
<div id="method-Ext.QuickTips-getQuickTip"></div>/**
* Gets the single {@link Ext.QuickTip QuickTip} instance used to show tips from all registered elements.
* @return {Ext.QuickTip}
*/
getQuickTip : function(){
return tip;
},
<div id="method-Ext.QuickTips-register"></div>/**
* Configures a new quick tip instance and assigns it to a target element. See
* {@link Ext.QuickTip#register} for details.
* @param {Object} config The config object
*/
register : function(){
tip.register.apply(tip, arguments);
},
<div id="method-Ext.QuickTips-unregister"></div>/**
* Removes any registered quick tip from the target element and destroys it.
* @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
*/
unregister : function(){
tip.unregister.apply(tip, arguments);
},
<div id="method-Ext.QuickTips-tips"></div>/**
* Alias of {@link #register}.
* @param {Object} config The config object
*/
tips : function(){
tip.register.apply(tip, arguments);
}
};
}();</pre>
</body>
</html>
|
