-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
+<html>
+<head>
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body onload="prettyPrint();">
<pre class="prettyprint lang-js"><div id="cls-Ext.ux.StatusBar"></div>/**
* @class Ext.ux.StatusBar
* <p>Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}. In addition to
* supporting the standard {@link Ext.Toolbar} 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 {@link #showBusy} method.</p>
- * <p><b>Note:</b> Although StatusBar supports xtype:'statusbar', at this time Ext.Toolbar (the base class) does
- * not support xtype. For this reason, if you are adding Toolbar items into the StatusBar you must declare it
- * using the "new StatusBar()" syntax for the items to render correctly.</p>
* <pre><code>
new Ext.Panel({
title: 'StatusBar',
*/
<div id="cfg-Ext.ux.StatusBar-text"></div>/**
* @cfg {String} text
- * A string that will be rendered into the status element as the status message (defaults to '');
+ * 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>{@link #defaultText}</code>
+ * will be used.
*/
<div id="cfg-Ext.ux.StatusBar-iconCls"></div>/**
* @cfg {String} iconCls
- * A CSS class that will be applied to the status element and is expected to provide a background image that will
- * serve as the status bar icon (defaults to ''). The class is applied directly to the div that also contains the
- * status text, so the rule should provide the appropriate padding on the div to make room for the image.
+ * 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>
// Example CSS rule:
.x-statusbar .x-status-custom {
padding-left: 25px;
- background: transparent url(images/custom-icon.gif) no-repeat 3px 3px;
+ background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
}
-// Initializing the status bar:
+// Setting a default icon:
var sb = new Ext.ux.StatusBar({
defaultIconCls: 'x-status-custom'
});
-// Setting it in code:
+// Changing the icon:
sb.setStatus({
text: 'New status',
iconCls: 'x-status-custom'
cls : 'x-statusbar',
<div id="cfg-Ext.ux.StatusBar-busyIconCls"></div>/**
* @cfg {String} busyIconCls
- * The default {@link #iconCls} applied when calling {@link #showBusy} (defaults to 'x-status-busy'). It can be
- * overridden at any time by passing the <tt>iconCls</tt> argument into <tt>showBusy</tt>. See the
- * iconCls docs for additional details about customizing the icon.
+ * The default <code>{@link #iconCls}</code> applied when calling
+ * <code>{@link #showBusy}</code> (defaults to <tt>'x-status-busy'</tt>).
+ * It can be overridden at any time by passing the <code>iconCls</code>
+ * argument into <code>{@link #showBusy}</code>.
*/
busyIconCls : 'x-status-busy',
<div id="cfg-Ext.ux.StatusBar-busyText"></div>/**
* @cfg {String} busyText
- * The default {@link #text} applied when calling {@link #showBusy} (defaults to 'Loading...'). It can be
- * overridden at any time by passing the <tt>text</tt> argument into <tt>showBusy</tt>.
+ * The default <code>{@link #text}</code> applied when calling
+ * <code>{@link #showBusy}</code> (defaults to <tt>'Loading...'</tt>).
+ * It can be overridden at any time by passing the <code>text</code>
+ * argument into <code>{@link #showBusy}</code>.
*/
busyText : 'Loading...',
<div id="cfg-Ext.ux.StatusBar-autoClear"></div>/**
* @cfg {Number} autoClear
- * The number of milliseconds to wait after setting the status via {@link #setStatus} before automatically
- * clearing the status text and icon (defaults to 5000). Note that this only applies when passing the
- * <tt>clear</tt> argument to setStatus since that is the only way to defer clearing the status. This can
- * be overridden by specifying a different <tt>wait</tt> value in setStatus. Calls to {@link #clearStatus}
+ * The number of milliseconds to wait after setting the status via
+ * <code>{@link #setStatus}</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>{@link #setStatus}</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>{@link #setStatus}</code>. Calls to <code>{@link #clearStatus}</code>
* always clear the status bar immediately and ignore this value.
*/
autoClear : 5000,
+ <div id="cfg-Ext.ux.StatusBar-emptyText"></div>/**
+ * @cfg {String} emptyText
+ * 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.
+ */
+ emptyText : ' ',
+
// private
activeThreadId : 0,
Ext.ux.StatusBar.superclass.afterRender.call(this);
var right = this.statusAlign == 'right';
+ this.currIconCls = this.iconCls || this.defaultIconCls;
this.statusEl = new Ext.Toolbar.TextItem({
- cls: 'x-status-text ' + (this.iconCls || this.defaultIconCls || ''),
+ cls: 'x-status-text ' + (this.currIconCls || ''),
text: this.text || this.defaultText || ''
});
return this;
}
- var text = o.useDefaults ? this.defaultText : '',
+ var text = o.useDefaults ? this.defaultText : this.emptyText,
iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';
if(o.anim){
- this.statusEl.fadeOut({
+ // animate the statusEl Ext.Element
+ this.statusEl.el.fadeOut({
remove: false,
useDisplay: true,
scope: this,
text: text,
iconCls: iconCls
});
- this.statusEl.show();
+
+ this.statusEl.el.show();
}
});
}else{
}
});
Ext.reg('statusbar', Ext.ux.StatusBar);
-</pre> \r
-</body>\r
+</pre>
+</body>
</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff