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
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
|
<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.ux.StatusBar-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.ux.StatusBar-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.ux.StatusBar-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.ux.StatusBar-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.ux.StatusBar"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><h1>Class <a href="source/StatusBar.html#cls-Ext.ux.StatusBar">Ext.ux.StatusBar</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.ux</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/StatusBar.html#cls-Ext.ux.StatusBar">StatusBar.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/StatusBar.html#cls-Ext.ux.StatusBar">StatusBar</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr></table><div class="description"><p>Basic status bar component that can be used as the bottom toolbar of any <a href="output/Ext.Panel.html" ext:cls="Ext.Panel">Ext.Panel</a>. In addition to
supporting the standard <a href="output/Ext.Toolbar.html" ext:cls="Ext.Toolbar">Ext.Toolbar</a> interface for adding buttons, menus and other items, the StatusBar
provides a greedy status element that can be aligned to either side and has convenient methods for setting the
status text and icon. You can also indicate that something is processing using the <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a> method.</p>
<pre><code><b>new</b> Ext.Panel({
title: <em>'StatusBar'</em>,
<i>// etc.</i>
bbar: <b>new</b> Ext.ux.StatusBar({
id: <em>'my-status'</em>,
<i>// defaults to use when the status is cleared:</i>
defaultText: <em>'Default status text'</em>,
defaultIconCls: <em>'<b>default</b>-icon'</em>,
<i>// values to set initially:</i>
text: <em>'Ready'</em>,
iconCls: <em>'ready-icon'</em>,
<i>// any standard Toolbar items:</i>
items: [{
text: <em>'A Button'</em>
}, <em>'-'</em>, <em>'Plain Text'</em>]
})
});
<i>// Update the status bar later <b>in</b> code:</i>
<b>var</b> sb = Ext.getCmp(<em>'my-status'</em>);
sb.setStatus({
text: <em>'OK'</em>,
iconCls: <em>'ok-icon'</em>,
clear: true <i>// auto-clear after a set interval</i>
});
<i>// Set the status bar to show that something is processing:</i>
sb.showBusy();
<i>// processing....</i>
sb.clearStatus(); <i>// once completeed</i></code></pre></div><div class="hr"></div><a id="Ext.ux.StatusBar-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-autoClear"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-autoClear">autoClear</a></b> : Number<div class="mdesc"><div class="short">The number of milliseconds to wait after setting the status via
setStatus before automatically clearing the status
te...</div><div class="long">The number of milliseconds to wait after setting the status via
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a></code> before automatically clearing the status
text and icon (defaults to <tt>5000</tt>). Note that this only applies
when passing the <tt>clear</tt> argument to <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a></code>
since that is the only way to defer clearing the status. This can
be overridden by specifying a different <tt>wait</tt> value in
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a></code>. Calls to <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-clearStatus" ext:member="clearStatus" ext:cls="Ext.ux.StatusBar">clearStatus</a></code>
always clear the status bar immediately and ignore this value.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-autoClear"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-autoClear">autoClear</a></b> : Number<div class="mdesc"><div class="short">The number of milliseconds to wait after setting the status via
setStatus before automatically clearing the status
te...</div><div class="long">The number of milliseconds to wait after setting the status via
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a></code> before automatically clearing the status
text and icon (defaults to <tt>5000</tt>). Note that this only applies
when passing the <tt>clear</tt> argument to <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a></code>
since that is the only way to defer clearing the status. This can
be overridden by specifying a different <tt>wait</tt> value in
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a></code>. Calls to <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-clearStatus" ext:member="clearStatus" ext:cls="Ext.ux.StatusBar">clearStatus</a></code>
always clear the status bar immediately and ignore this value.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-busyIconCls"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-busyIconCls">busyIconCls</a></b> : String<div class="mdesc"><div class="short">The default iconCls applied when calling
showBusy (defaults to 'x-status-busy').
It can be overridden at any time by ...</div><div class="long">The default <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a></code> applied when calling
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code> (defaults to <tt>'x-status-busy'</tt>).
It can be overridden at any time by passing the <code>iconCls</code>
argument into <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code>.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-busyIconCls"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-busyIconCls">busyIconCls</a></b> : String<div class="mdesc"><div class="short">The default iconCls applied when calling
showBusy (defaults to 'x-status-busy').
It can be overridden at any time by ...</div><div class="long">The default <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a></code> applied when calling
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code> (defaults to <tt>'x-status-busy'</tt>).
It can be overridden at any time by passing the <code>iconCls</code>
argument into <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code>.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-busyText"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-busyText">busyText</a></b> : String<div class="mdesc"><div class="short">The default text applied when calling
showBusy (defaults to 'Loading...').
It can be overridden at any time by passin...</div><div class="long">The default <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-text" ext:member="text" ext:cls="Ext.ux.StatusBar">text</a></code> applied when calling
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code> (defaults to <tt>'Loading...'</tt>).
It can be overridden at any time by passing the <code>text</code>
argument into <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code>.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-busyText"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-busyText">busyText</a></b> : String<div class="mdesc"><div class="short">The default text applied when calling
showBusy (defaults to 'Loading...').
It can be overridden at any time by passin...</div><div class="long">The default <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-text" ext:member="text" ext:cls="Ext.ux.StatusBar">text</a></code> applied when calling
<code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code> (defaults to <tt>'Loading...'</tt>).
It can be overridden at any time by passing the <code>text</code>
argument into <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-showBusy" ext:member="showBusy" ext:cls="Ext.ux.StatusBar">showBusy</a></code>.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-cls"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-cls">cls</a></b> : String<div class="mdesc">The base class applied to the containing element for this component on render (defaults to 'x-statusbar')</div></td><td class="msource">StatusBar</td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-cls"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-cls">cls</a></b> : String<div class="mdesc">The base class applied to the containing element for this component on render (defaults to 'x-statusbar')</div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-defaultIconCls"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-defaultIconCls">defaultIconCls</a></b> : String<div class="mdesc"><div class="short">The default iconCls value (see the iconCls docs for additional details about customizing the icon).
This will be used...</div><div class="long">The default <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a> value (see the iconCls docs for additional details about customizing the icon).
This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to '').</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-defaultIconCls"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-defaultIconCls">defaultIconCls</a></b> : String<div class="mdesc"><div class="short">The default iconCls value (see the iconCls docs for additional details about customizing the icon).
This will be used...</div><div class="long">The default <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a> value (see the iconCls docs for additional details about customizing the icon).
This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to '').</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-defaultText"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-defaultText">defaultText</a></b> : String<div class="mdesc"><div class="short">The default text value. This will be used anytime the status bar is cleared with the
useDefaults:true option (defaul...</div><div class="long">The default <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-text" ext:member="text" ext:cls="Ext.ux.StatusBar">text</a> value. This will be used anytime the status bar is cleared with the
<tt>useDefaults:true</tt> option (defaults to '').</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-defaultText"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-defaultText">defaultText</a></b> : String<div class="mdesc"><div class="short">The default text value. This will be used anytime the status bar is cleared with the
useDefaults:true option (defaul...</div><div class="long">The default <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-text" ext:member="text" ext:cls="Ext.ux.StatusBar">text</a> value. This will be used anytime the status bar is cleared with the
<tt>useDefaults:true</tt> option (defaults to '').</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-emptyText"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-emptyText">emptyText</a></b> : String<div class="mdesc"><div class="short">The text string to use if no text has been set. Defaults to
'&nbsp;'). If there are no other items in the toolbar u...</div><div class="long">The text string to use if no text has been set. Defaults to
<tt>' '</tt>). If there are no other items in the toolbar using
an empty string (<tt>''</tt>) for this value would end up in the toolbar
height collapsing since the empty string will not maintain the toolbar
height. Use <tt>''</tt> if the toolbar should collapse in height
vertically when no text is specified and there are no other items in
the toolbar.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-emptyText"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-emptyText">emptyText</a></b> : String<div class="mdesc"><div class="short">The text string to use if no text has been set. Defaults to
'&nbsp;'). If there are no other items in the toolbar u...</div><div class="long">The text string to use if no text has been set. Defaults to
<tt>' '</tt>). If there are no other items in the toolbar using
an empty string (<tt>''</tt>) for this value would end up in the toolbar
height collapsing since the empty string will not maintain the toolbar
height. Use <tt>''</tt> if the toolbar should collapse in height
vertically when no text is specified and there are no other items in
the toolbar.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-iconCls"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-iconCls">iconCls</a></b> : String<div class="mdesc"><div class="short">A CSS class that will be initially set as the status bar icon and is
expected to provide a background image (defaults...</div><div class="long">A CSS class that will be <b>initially</b> set as the status bar icon and is
expected to provide a background image (defaults to '').
Example usage:<pre><code><i>// Example CSS rule:</i>
.x-statusbar .x-status-custom {
padding-left: 25px;
background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
}
<i>// Setting a <b>default</b> icon:</i>
<b>var</b> sb = <b>new</b> Ext.ux.StatusBar({
defaultIconCls: <em>'x-status-custom'</em>
});
<i>// Changing the icon:</i>
sb.setStatus({
text: <em>'New status'</em>,
iconCls: <em>'x-status-custom'</em>
});</code></pre></div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-iconCls"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-iconCls">iconCls</a></b> : String<div class="mdesc"><div class="short">A CSS class that will be initially set as the status bar icon and is
expected to provide a background image (defaults...</div><div class="long">A CSS class that will be <b>initially</b> set as the status bar icon and is
expected to provide a background image (defaults to '').
Example usage:<pre><code><i>// Example CSS rule:</i>
.x-statusbar .x-status-custom {
padding-left: 25px;
background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
}
<i>// Setting a <b>default</b> icon:</i>
<b>var</b> sb = <b>new</b> Ext.ux.StatusBar({
defaultIconCls: <em>'x-status-custom'</em>
});
<i>// Changing the icon:</i>
sb.setStatus({
text: <em>'New status'</em>,
iconCls: <em>'x-status-custom'</em>
});</code></pre></div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-statusAlign"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-statusAlign">statusAlign</a></b> : String<div class="mdesc"><div class="short">The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered,
it creates ...</div><div class="long">The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered,
it creates an internal div containing the status text and icon. Any additional Toolbar items added in the
StatusBar's <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-items" ext:member="items" ext:cls="Ext.ux.StatusBar">items</a> config, or added via <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-add" ext:member="add" ext:cls="Ext.ux.StatusBar">add</a> or any of the supported add* methods, will be
rendered, in added order, to the opposite side. The status element is greedy, so it will automatically
expand to take up all sapce left over by any other items. Example usage:
<pre><code><i>// Create a left-aligned status bar containing a button,</i>
<i>// separator and text item that will be right-aligned (<b>default</b>):</i>
<b>new</b> Ext.Panel({
title: <em>'StatusBar'</em>,
<i>// etc.</i>
bbar: <b>new</b> Ext.ux.StatusBar({
defaultText: <em>'Default status text'</em>,
id: <em>'status-id'</em>,
items: [{
text: <em>'A Button'</em>
}, <em>'-'</em>, <em>'Plain Text'</em>]
})
});
<i>// By adding the statusAlign config, this will create the</i>
<i>// exact same toolbar, except the status and toolbar item</i>
<i>// layout will be reversed from the previous example:</i>
<b>new</b> Ext.Panel({
title: <em>'StatusBar'</em>,
<i>// etc.</i>
bbar: <b>new</b> Ext.ux.StatusBar({
defaultText: <em>'Default status text'</em>,
id: <em>'status-id'</em>,
statusAlign: <em>'right'</em>,
items: [{
text: <em>'A Button'</em>
}, <em>'-'</em>, <em>'Plain Text'</em>]
})
});</code></pre></div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-statusAlign"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-statusAlign">statusAlign</a></b> : String<div class="mdesc"><div class="short">The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered,
it creates ...</div><div class="long">The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered,
it creates an internal div containing the status text and icon. Any additional Toolbar items added in the
StatusBar's <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-items" ext:member="items" ext:cls="Ext.ux.StatusBar">items</a> config, or added via <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-add" ext:member="add" ext:cls="Ext.ux.StatusBar">add</a> or any of the supported add* methods, will be
rendered, in added order, to the opposite side. The status element is greedy, so it will automatically
expand to take up all sapce left over by any other items. Example usage:
<pre><code><i>// Create a left-aligned status bar containing a button,</i>
<i>// separator and text item that will be right-aligned (<b>default</b>):</i>
<b>new</b> Ext.Panel({
title: <em>'StatusBar'</em>,
<i>// etc.</i>
bbar: <b>new</b> Ext.ux.StatusBar({
defaultText: <em>'Default status text'</em>,
id: <em>'status-id'</em>,
items: [{
text: <em>'A Button'</em>
}, <em>'-'</em>, <em>'Plain Text'</em>]
})
});
<i>// By adding the statusAlign config, this will create the</i>
<i>// exact same toolbar, except the status and toolbar item</i>
<i>// layout will be reversed from the previous example:</i>
<b>new</b> Ext.Panel({
title: <em>'StatusBar'</em>,
<i>// etc.</i>
bbar: <b>new</b> Ext.ux.StatusBar({
defaultText: <em>'Default status text'</em>,
id: <em>'status-id'</em>,
statusAlign: <em>'right'</em>,
items: [{
text: <em>'A Button'</em>
}, <em>'-'</em>, <em>'Plain Text'</em>]
})
});</code></pre></div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-text"></a><b><a href="source/StatusBar.html#cfg-Ext.ux.StatusBar-text">text</a></b> : String<div class="mdesc"><div class="short">A string that will be initially set as the status message. This string
will be set as innerHTML (html tags are accep...</div><div class="long">A string that will be <b>initially</b> set as the status message. This string
will be set as innerHTML (html tags are accepted) for the toolbar item.
If not specified, the value set for <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultText" ext:member="defaultText" ext:cls="Ext.ux.StatusBar">defaultText</a></code>
will be used.</div></div></td><td class="msource">StatusBar</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-text"></a><b><a href="source/ux-all-debug.html#cfg-Ext.ux.StatusBar-text">text</a></b> : String<div class="mdesc"><div class="short">A string that will be initially set as the status message. This string
will be set as innerHTML (html tags are accep...</div><div class="long">A string that will be <b>initially</b> set as the status message. This string
will be set as innerHTML (html tags are accepted) for the toolbar item.
If not specified, the value set for <code><a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultText" ext:member="defaultText" ext:cls="Ext.ux.StatusBar">defaultText</a></code>
will be used.</div></div></td><td class="msource">StatusBar</td></tr></tbody></table><a id="Ext.ux.StatusBar-props"></a><h2>Public Properties</h2><div class="no-members">This class has no public properties.</div><a id="Ext.ux.StatusBar-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-StatusBar"></a><b><a href="source/StatusBar.html#cls-Ext.ux.StatusBar">StatusBar</a></b>( <code>Object/Array config</code> )
<div class="mdesc"><div class="short">Creates a new StatusBar</div><div class="long">Creates a new StatusBar<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>config</code> : Object/Array<div class="sub-desc">A config object</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">StatusBar</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-clearStatus"></a><b><a href="source/ux-all-debug.html#method-Ext.ux.StatusBar-clearStatus">clearStatus</a></b>( <span title="Optional" class="optional">[<code>Object config</code>]</span> )
:
Ext.ux.StatusBar<div class="mdesc"><div class="short">Clears the status text and iconCls. Also supports clearing via an optional fade out animation.</div><div class="long">Clears the status <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-text" ext:member="text" ext:cls="Ext.ux.StatusBar">text</a> and <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a>. Also supports clearing via an optional fade out animation.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>config</code> : Object<div class="sub-desc">(optional) A config object containing any or all of the following properties. If this
object is not specified the status will be cleared using the defaults below:<ul>
<li><tt>anim</tt> {Boolean} : (optional) True to clear the status by fading out the status element (defaults
to false which clears immediately).</li>
<li><tt>useDefaults</tt> {Boolean} : (optional) True to reset the text and icon using <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultText" ext:member="defaultText" ext:cls="Ext.ux.StatusBar">defaultText</a> and
<a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultIconCls" ext:member="defaultIconCls" ext:cls="Ext.ux.StatusBar">defaultIconCls</a> (defaults to false which sets the text to '' and removes any existing icon class).</li>
</ul></div></li></ul><strong>Returns:</strong><ul><li><code>Ext.ux.StatusBar</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource">StatusBar</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-getText"></a><b><a href="source/ux-all-debug.html#method-Ext.ux.StatusBar-getText">getText</a></b>()
:
String<div class="mdesc"><div class="short">Returns the current status text.</div><div class="long">Returns the current status text.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">The status text</div></li></ul></div></div></div></td><td class="msource">StatusBar</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-setIcon"></a><b><a href="source/ux-all-debug.html#method-Ext.ux.StatusBar-setIcon">setIcon</a></b>( <span title="Optional" class="optional">[<code>String iconCls</code>]</span> )
:
Ext.ux.StatusBar<div class="mdesc"><div class="short">Convenience method for setting the status icon directly. For more flexible options see setStatus.
See iconCls for co...</div><div class="long">Convenience method for setting the status icon directly. For more flexible options see <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a>.
See <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a> for complete details about customizing the icon.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>iconCls</code> : String<div class="sub-desc">(optional) The icon class to set (defaults to '', and any current icon class is removed)</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.ux.StatusBar</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource">StatusBar</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-setStatus"></a><b><a href="source/ux-all-debug.html#method-Ext.ux.StatusBar-setStatus">setStatus</a></b>( <code>Object/String config</code> )
:
Ext.ux.StatusBar<div class="mdesc"><div class="short">Sets the status text and/or iconCls. Also supports automatically clearing the
status that was set after a specified i...</div><div class="long">Sets the status <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-text" ext:member="text" ext:cls="Ext.ux.StatusBar">text</a> and/or <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a>. Also supports automatically clearing the
status that was set after a specified interval.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>config</code> : Object/String<div class="sub-desc">A config object specifying what status to set, or a string assumed
to be the status text (and all other options are defaulted as explained below). A config
object containing any or all of the following properties can be passed:<ul>
<li><tt>text</tt> {String} : (optional) The status text to display. If not specified, any current
status text will remain unchanged.</li>
<li><tt>iconCls</tt> {String} : (optional) The CSS class used to customize the status icon (see
<a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-iconCls" ext:member="iconCls" ext:cls="Ext.ux.StatusBar">iconCls</a> for details). If not specified, any current iconCls will remain unchanged.</li>
<li><tt>clear</tt> {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
specified, the new status will not be auto-cleared and will stay until updated again or cleared using
<a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-clearStatus" ext:member="clearStatus" ext:cls="Ext.ux.StatusBar">clearStatus</a>. If <tt>true</tt> is passed, the status will be cleared using <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-autoClear" ext:member="autoClear" ext:cls="Ext.ux.StatusBar">autoClear</a>,
<a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultText" ext:member="defaultText" ext:cls="Ext.ux.StatusBar">defaultText</a> and <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultIconCls" ext:member="defaultIconCls" ext:cls="Ext.ux.StatusBar">defaultIconCls</a> via a fade out animation. If a numeric value is passed,
it will be used as the callback interval (in milliseconds), overriding the <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-autoClear" ext:member="autoClear" ext:cls="Ext.ux.StatusBar">autoClear</a> value.
All other options will be defaulted as with the boolean option. To customize any other options,
you can pass an object in the format:<ul>
<li><tt>wait</tt> {Number} : (optional) The number of milliseconds to wait before clearing
(defaults to <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-autoClear" ext:member="autoClear" ext:cls="Ext.ux.StatusBar">autoClear</a>).</li>
<li><tt>anim</tt> {Number} : (optional) False to clear the status immediately once the callback
executes (defaults to true which fades the status out).</li>
<li><tt>useDefaults</tt> {Number} : (optional) False to completely clear the status text and iconCls
(defaults to true which uses <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultText" ext:member="defaultText" ext:cls="Ext.ux.StatusBar">defaultText</a> and <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-defaultIconCls" ext:member="defaultIconCls" ext:cls="Ext.ux.StatusBar">defaultIconCls</a>).</li>
</ul></li></ul>
Example usage:<pre><code><i>// Simple call to update the text</i>
statusBar.setStatus(<em>'New status'</em>);
<i>// Set the status and icon, auto-clearing <b>with</b> <b>default</b> options:</i>
statusBar.setStatus({
text: <em>'New status'</em>,
iconCls: <em>'x-status-custom'</em>,
clear: true
});
<i>// Auto-clear <b>with</b> custom options:</i>
statusBar.setStatus({
text: <em>'New status'</em>,
iconCls: <em>'x-status-custom'</em>,
clear: {
wait: 8000,
anim: false,
useDefaults: false
}
});</code></pre></div></li></ul><strong>Returns:</strong><ul><li><code>Ext.ux.StatusBar</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource">StatusBar</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-setText"></a><b><a href="source/ux-all-debug.html#method-Ext.ux.StatusBar-setText">setText</a></b>( <span title="Optional" class="optional">[<code>String text</code>]</span> )
:
Ext.ux.StatusBar<div class="mdesc"><div class="short">Convenience method for setting the status text directly. For more flexible options see setStatus.</div><div class="long">Convenience method for setting the status text directly. For more flexible options see <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a>.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>text</code> : String<div class="sub-desc">(optional) The text to set (defaults to '')</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.ux.StatusBar</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource">StatusBar</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.ux.StatusBar-showBusy"></a><b><a href="source/ux-all-debug.html#method-Ext.ux.StatusBar-showBusy">showBusy</a></b>( <span title="Optional" class="optional">[<code>Object/String config</code>]</span> )
:
Ext.ux.StatusBar<div class="mdesc"><div class="short">Convenience method for setting the status text and icon to special values that are pre-configured to indicate
a "busy...</div><div class="long">Convenience method for setting the status text and icon to special values that are pre-configured to indicate
a "busy" state, usually for loading or processing activities.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>config</code> : Object/String<div class="sub-desc">(optional) A config object in the same format supported by <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a>, or a
string to use as the status text (in which case all other options for setStatus will be defaulted). Use the
<tt>text</tt> and/or <tt>iconCls</tt> properties on the config to override the default <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-busyText" ext:member="busyText" ext:cls="Ext.ux.StatusBar">busyText</a>
and <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-busyIconCls" ext:member="busyIconCls" ext:cls="Ext.ux.StatusBar">busyIconCls</a> settings. If the config argument is not specified, <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-busyText" ext:member="busyText" ext:cls="Ext.ux.StatusBar">busyText</a> and
<a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-busyIconCls" ext:member="busyIconCls" ext:cls="Ext.ux.StatusBar">busyIconCls</a> will be used in conjunction with all of the default options for <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-setStatus" ext:member="setStatus" ext:cls="Ext.ux.StatusBar">setStatus</a>.</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.ux.StatusBar</code><div class="sub-desc">this</div></li></ul></div></div></div></td><td class="msource">StatusBar</td></tr></tbody></table><a id="Ext.ux.StatusBar-events"></a><h2>Public Events</h2><div class="no-members">This class has no public events.</div></div>
|
