Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / docs / output / Ext.ux.StatusBar.html
diff --git a/examples/docs/output/Ext.ux.StatusBar.html b/examples/docs/output/Ext.ux.StatusBar.html
new file mode 100644 (file)
index 0000000..e79dd4d
--- /dev/null
@@ -0,0 +1,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>&#13;<a class="inner-link" href="#Ext.ux.StatusBar-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a>&#13;<a class="inner-link" href="#Ext.ux.StatusBar-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a>&#13;<a class="inner-link" href="#Ext.ux.StatusBar-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>&#13;<a class="bookmark" href="../docs/?class=Ext.ux.StatusBar"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>&#13;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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
+'&amp;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>'&nbsp;'</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">&nbsp;</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
+'&amp;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>'&nbsp;'</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>(&nbsp;<code>Object/Array&nbsp;config</code>&nbsp;)
+    <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">&nbsp;</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>(&nbsp;<span title="Optional" class="optional">[<code>Object&nbsp;config</code>]</span>&nbsp;)
+    :
+                                        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">&nbsp;</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">&nbsp;</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>(&nbsp;<span title="Optional" class="optional">[<code>String&nbsp;iconCls</code>]</span>&nbsp;)
+    :
+                                        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">&nbsp;</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>(&nbsp;<code>Object/String&nbsp;config</code>&nbsp;)
+    :
+                                        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">&nbsp;</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>(&nbsp;<span title="Optional" class="optional">[<code>String&nbsp;text</code>]</span>&nbsp;)
+    :
+                                        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">&nbsp;</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>(&nbsp;<span title="Optional" class="optional">[<code>Object/String&nbsp;config</code>]</span>&nbsp;)
+    :
+                                        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>
\ No newline at end of file