examples/docs/output/Ext.ux.StatusBar.html

   1 <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
   2 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
   3 provides a greedy status element that can be aligned to either side and has convenient methods for setting the
   4 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>
   5 <pre><code><b>new</b> Ext.Panel({
   6     title: <em>'StatusBar'</em>,
   7     <i>// etc.</i>
   8     bbar: <b>new</b> Ext.ux.StatusBar({
   9         id: <em>'my-status'</em>,
  10
  11         <i>// defaults to use when the status is cleared:</i>
  12         defaultText: <em>'Default status text'</em>,
  13         defaultIconCls: <em>'<b>default</b>-icon'</em>,
  14
  15         <i>// values to set initially:</i>
  16         text: <em>'Ready'</em>,
  17         iconCls: <em>'ready-icon'</em>,
  18
  19         <i>// any standard Toolbar items:</i>
  20         items: [{
  21             text: <em>'A Button'</em>
  22         }, <em>'-'</em>, <em>'Plain Text'</em>]
  23     })
  24 });
  25
  26 <i>// Update the status bar later <b>in</b> code:</i>
  27 <b>var</b> sb = Ext.getCmp(<em>'my-status'</em>);
  28 sb.setStatus({
  29     text: <em>'OK'</em>,
  30     iconCls: <em>'ok-icon'</em>,
  31     clear: true <i>// auto-clear after a set interval</i>
  32 });
  33
  34 <i>// Set the status bar to show that something is processing:</i>
  35 sb.showBusy();
  36
  37 <i>// processing....</i>
  38
  39 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
  40 setStatus before automatically clearing the status
  41 te...</div><div class="long">The number of milliseconds to wait after setting the status via
  42 <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
  43 text and icon (defaults to <tt>5000</tt>).  Note that this only applies
  44 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>
  45 since that is the only way to defer clearing the status.  This can
  46 be overridden by specifying a different <tt>wait</tt> value in
  47 <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>
  48 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
  49 setStatus before automatically clearing the status
  50 te...</div><div class="long">The number of milliseconds to wait after setting the status via
  51 <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
  52 text and icon (defaults to <tt>5000</tt>).  Note that this only applies
  53 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>
  54 since that is the only way to defer clearing the status.  This can
  55 be overridden by specifying a different <tt>wait</tt> value in
  56 <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>
  57 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
  58 showBusy (defaults to 'x-status-busy').
  59 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
  60 <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>).
  61 It can be overridden at any time by passing the <code>iconCls</code>
  62 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
  63 showBusy (defaults to 'x-status-busy').
  64 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
  65 <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>).
  66 It can be overridden at any time by passing the <code>iconCls</code>
  67 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
  68 showBusy (defaults to 'Loading...').
  69 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
  70 <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>).
  71 It can be overridden at any time by passing the <code>text</code>
  72 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
  73 showBusy (defaults to 'Loading...').
  74 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
  75 <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>).
  76 It can be overridden at any time by passing the <code>text</code>
  77 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).
  78 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).
  79 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).
  80 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).
  81 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
  82 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
  83 <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
  84 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
  85 <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
  86 '&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
  87 <tt>'&nbsp;'</tt>).  If there are no other items in the toolbar using
  88 an empty string (<tt>''</tt>) for this value would end up in the toolbar
  89 height collapsing since the empty string will not maintain the toolbar
  90 height.  Use <tt>''</tt> if the toolbar should collapse in height
  91 vertically when no text is specified and there are no other items in
  92 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
  93 '&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
  94 <tt>'&nbsp;'</tt>).  If there are no other items in the toolbar using
  95 an empty string (<tt>''</tt>) for this value would end up in the toolbar
  96 height collapsing since the empty string will not maintain the toolbar
  97 height.  Use <tt>''</tt> if the toolbar should collapse in height
  98 vertically when no text is specified and there are no other items in
  99 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
 100 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
 101 expected to provide a background image (defaults to '').
 102 Example usage:<pre><code><i>// Example CSS rule:</i>
 103 .x-statusbar .x-status-custom {
 104     padding-left: 25px;
 105     background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
 106 }
 107
 108 <i>// Setting a <b>default</b> icon:</i>
 109 <b>var</b> sb = <b>new</b> Ext.ux.StatusBar({
 110     defaultIconCls: <em>'x-status-custom'</em>
 111 });
 112
 113 <i>// Changing the icon:</i>
 114 sb.setStatus({
 115     text: <em>'New status'</em>,
 116     iconCls: <em>'x-status-custom'</em>
 117 });</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
 118 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
 119 expected to provide a background image (defaults to '').
 120 Example usage:<pre><code><i>// Example CSS rule:</i>
 121 .x-statusbar .x-status-custom {
 122     padding-left: 25px;
 123     background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
 124 }
 125
 126 <i>// Setting a <b>default</b> icon:</i>
 127 <b>var</b> sb = <b>new</b> Ext.ux.StatusBar({
 128     defaultIconCls: <em>'x-status-custom'</em>
 129 });
 130
 131 <i>// Changing the icon:</i>
 132 sb.setStatus({
 133     text: <em>'New status'</em>,
 134     iconCls: <em>'x-status-custom'</em>
 135 });</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,
 136 it creates ...</div><div class="long">The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,
 137 it creates an internal div containing the status text and icon.  Any additional Toolbar items added in the
 138 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
 139 rendered, in added order, to the opposite side.  The status element is greedy, so it will automatically
 140 expand to take up all sapce left over by any other items.  Example usage:
 141 <pre><code><i>// Create a left-aligned status bar containing a button,</i>
 142 <i>// separator and text item that will be right-aligned (<b>default</b>):</i>
 143 <b>new</b> Ext.Panel({
 144     title: <em>'StatusBar'</em>,
 145     <i>// etc.</i>
 146     bbar: <b>new</b> Ext.ux.StatusBar({
 147         defaultText: <em>'Default status text'</em>,
 148         id: <em>'status-id'</em>,
 149         items: [{
 150             text: <em>'A Button'</em>
 151         }, <em>'-'</em>, <em>'Plain Text'</em>]
 152     })
 153 });
 154
 155 <i>// By adding the statusAlign config, this will create the</i>
 156 <i>// exact same toolbar, except the status and toolbar item</i>
 157 <i>// layout will be reversed from the previous example:</i>
 158 <b>new</b> Ext.Panel({
 159     title: <em>'StatusBar'</em>,
 160     <i>// etc.</i>
 161     bbar: <b>new</b> Ext.ux.StatusBar({
 162         defaultText: <em>'Default status text'</em>,
 163         id: <em>'status-id'</em>,
 164         statusAlign: <em>'right'</em>,
 165         items: [{
 166             text: <em>'A Button'</em>
 167         }, <em>'-'</em>, <em>'Plain Text'</em>]
 168     })
 169 });</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,
 170 it creates ...</div><div class="long">The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,
 171 it creates an internal div containing the status text and icon.  Any additional Toolbar items added in the
 172 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
 173 rendered, in added order, to the opposite side.  The status element is greedy, so it will automatically
 174 expand to take up all sapce left over by any other items.  Example usage:
 175 <pre><code><i>// Create a left-aligned status bar containing a button,</i>
 176 <i>// separator and text item that will be right-aligned (<b>default</b>):</i>
 177 <b>new</b> Ext.Panel({
 178     title: <em>'StatusBar'</em>,
 179     <i>// etc.</i>
 180     bbar: <b>new</b> Ext.ux.StatusBar({
 181         defaultText: <em>'Default status text'</em>,
 182         id: <em>'status-id'</em>,
 183         items: [{
 184             text: <em>'A Button'</em>
 185         }, <em>'-'</em>, <em>'Plain Text'</em>]
 186     })
 187 });
 188
 189 <i>// By adding the statusAlign config, this will create the</i>
 190 <i>// exact same toolbar, except the status and toolbar item</i>
 191 <i>// layout will be reversed from the previous example:</i>
 192 <b>new</b> Ext.Panel({
 193     title: <em>'StatusBar'</em>,
 194     <i>// etc.</i>
 195     bbar: <b>new</b> Ext.ux.StatusBar({
 196         defaultText: <em>'Default status text'</em>,
 197         id: <em>'status-id'</em>,
 198         statusAlign: <em>'right'</em>,
 199         items: [{
 200             text: <em>'A Button'</em>
 201         }, <em>'-'</em>, <em>'Plain Text'</em>]
 202     })
 203 });</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
 204 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
 205 will be set as innerHTML (html tags are accepted) for the toolbar item.
 206 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>
 207 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
 208 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
 209 will be set as innerHTML (html tags are accepted) for the toolbar item.
 210 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>
 211 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;)
 212     <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;)
 213     :
 214                                         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
 215 object is not specified the status will be cleared using the defaults below:<ul>
 216 <li><tt>anim</tt> {Boolean} : (optional) True to clear the status by fading out the status element (defaults
 217 to false which clears immediately).</li>
 218 <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
 219 <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>
 220 </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>()
 221     :
 222                                         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;)
 223     :
 224                                         Ext.ux.StatusBar<div class="mdesc"><div class="short">Convenience method for setting the status icon directly.  For more flexible options see setStatus.
 225 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>.
 226 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;)
 227     :
 228                                         Ext.ux.StatusBar<div class="mdesc"><div class="short">Sets the status text and/or iconCls. Also supports automatically clearing the
 229 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
 230 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
 231 to be the status text (and all other options are defaulted as explained below). A config
 232 object containing any or all of the following properties can be passed:<ul>
 233 <li><tt>text</tt> {String} : (optional) The status text to display.  If not specified, any current
 234 status text will remain unchanged.</li>
 235 <li><tt>iconCls</tt> {String} : (optional) The CSS class used to customize the status icon (see
 236 <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>
 237 <li><tt>clear</tt> {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
 238 automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
 239 specified, the new status will not be auto-cleared and will stay until updated again or cleared using
 240 <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>,
 241 <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,
 242 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.
 243 All other options will be defaulted as with the boolean option.  To customize any other options,
 244 you can pass an object in the format:<ul>
 245 <li><tt>wait</tt> {Number} : (optional) The number of milliseconds to wait before clearing
 246 (defaults to <a href="output/Ext.ux.StatusBar.html#Ext.ux.StatusBar-autoClear" ext:member="autoClear" ext:cls="Ext.ux.StatusBar">autoClear</a>).</li>
 247 <li><tt>anim</tt> {Number} : (optional) False to clear the status immediately once the callback
 248 executes (defaults to true which fades the status out).</li>
 249 <li><tt>useDefaults</tt> {Number} : (optional) False to completely clear the status text and iconCls
 250 (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>
 251 </ul></li></ul>
 252 Example usage:<pre><code><i>// Simple call to update the text</i>
 253 statusBar.setStatus(<em>'New status'</em>);
 254
 255 <i>// Set the status and icon, auto-clearing <b>with</b> <b>default</b> options:</i>
 256 statusBar.setStatus({
 257     text: <em>'New status'</em>,
 258     iconCls: <em>'x-status-custom'</em>,
 259     clear: true
 260 });
 261
 262 <i>// Auto-clear <b>with</b> custom options:</i>
 263 statusBar.setStatus({
 264     text: <em>'New status'</em>,
 265     iconCls: <em>'x-status-custom'</em>,
 266     clear: {
 267         wait: 8000,
 268         anim: false,
 269         useDefaults: false
 270     }
 271 });</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;)
 272     :
 273                                         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;)
 274     :
 275                                         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
 276 a "busy...</div><div class="long">Convenience method for setting the status text and icon to special values that are pre-configured to indicate
 277 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
 278 string to use as the status text (in which case all other options for setStatus will be defaulted).  Use the
 279 <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>
 280 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
 281 <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>