X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/examples/ux/statusbar/StatusBar.js diff --git a/examples/ux/statusbar/StatusBar.js b/examples/ux/statusbar/StatusBar.js new file mode 100644 index 00000000..eb2ad9e0 --- /dev/null +++ b/examples/ux/statusbar/StatusBar.js @@ -0,0 +1,418 @@ +/** + * @class Ext.ux.StatusBar + *
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.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.
+ *
+Ext.create('Ext.Panel', {
+ title: 'StatusBar',
+ // etc.
+ bbar: Ext.create('Ext.ux.StatusBar', {
+ id: 'my-status',
+
+ // defaults to use when the status is cleared:
+ defaultText: 'Default status text',
+ defaultIconCls: 'default-icon',
+
+ // values to set initially:
+ text: 'Ready',
+ iconCls: 'ready-icon',
+
+ // any standard Toolbar items:
+ items: [{
+ text: 'A Button'
+ }, '-', 'Plain Text']
+ })
+});
+
+// Update the status bar later in code:
+var sb = Ext.getCmp('my-status');
+sb.setStatus({
+ text: 'OK',
+ iconCls: 'ok-icon',
+ clear: true // auto-clear after a set interval
+});
+
+// Set the status bar to show that something is processing:
+sb.showBusy();
+
+// processing....
+
+sb.clearStatus(); // once completeed
+
+ * @extends Ext.toolbar.Toolbar
+ * @constructor
+ * Creates a new StatusBar
+ * @param {Object/Array} config A config object
+ */
+Ext.define('Ext.ux.statusbar.StatusBar', {
+ extend: 'Ext.toolbar.Toolbar',
+ alternateClassName: 'Ext.ux.StatusBar',
+ alias: 'widget.statusbar',
+ requires: ['Ext.toolbar.TextItem'],
+ /**
+ * @cfg {String} statusAlign
+ * 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 {@link #items} config, or added via {@link #add} 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:
+ *
+// Create a left-aligned status bar containing a button,
+// separator and text item that will be right-aligned (default):
+Ext.create('Ext.Panel', {
+ title: 'StatusBar',
+ // etc.
+ bbar: Ext.create('Ext.ux.StatusBar', {
+ defaultText: 'Default status text',
+ id: 'status-id',
+ items: [{
+ text: 'A Button'
+ }, '-', 'Plain Text']
+ })
+});
+
+// By adding the statusAlign config, this will create the
+// exact same toolbar, except the status and toolbar item
+// layout will be reversed from the previous example:
+Ext.create('Ext.Panel', {
+ title: 'StatusBar',
+ // etc.
+ bbar: Ext.create('Ext.ux.StatusBar', {
+ defaultText: 'Default status text',
+ id: 'status-id',
+ statusAlign: 'right',
+ items: [{
+ text: 'A Button'
+ }, '-', 'Plain Text']
+ })
+});
+
+ */
+ /**
+ * @cfg {String} defaultText
+ * The default {@link #text} value. This will be used anytime the status bar is cleared with the
+ * useDefaults:true option (defaults to '').
+ */
+ /**
+ * @cfg {String} defaultIconCls
+ * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).
+ * This will be used anytime the status bar is cleared with the useDefaults:true option (defaults to '').
+ */
+ /**
+ * @cfg {String} text
+ * A string that will be initially 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 {@link #defaultText}
+ * will be used.
+ */
+ /**
+ * @cfg {String} iconCls
+ * A CSS class that will be initially set as the status bar icon and is
+ * expected to provide a background image (defaults to '').
+ * Example usage:
+// Example CSS rule:
+.x-statusbar .x-status-custom {
+ padding-left: 25px;
+ background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
+}
+
+// Setting a default icon:
+var sb = Ext.create('Ext.ux.StatusBar', {
+ defaultIconCls: 'x-status-custom'
+});
+
+// Changing the icon:
+sb.setStatus({
+ text: 'New status',
+ iconCls: 'x-status-custom'
+});
+
+ */
+
+ /**
+ * @cfg {String} cls
+ * The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
+ */
+ cls : 'x-statusbar',
+ /**
+ * @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 iconCls
+ * argument into {@link #showBusy}
.
+ */
+ busyIconCls : 'x-status-busy',
+ /**
+ * @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 text
+ * argument into {@link #showBusy}
.
+ */
+ busyText : 'Loading...',
+ /**
+ * @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 clear argument to {@link #setStatus}
+ * since that is the only way to defer clearing the status. This can
+ * be overridden by specifying a different wait value in
+ * {@link #setStatus}
. Calls to {@link #clearStatus}
+ * always clear the status bar immediately and ignore this value.
+ */
+ autoClear : 5000,
+
+ /**
+ * @cfg {String} emptyText
+ * The text string to use if no text has been set. Defaults to
+ * ' '). If there are no other items in the toolbar using
+ * an empty string ('') for this value would end up in the toolbar
+ * height collapsing since the empty string will not maintain the toolbar
+ * height. Use '' 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,
+
+ // private
+ initComponent : function(){
+ if (this.statusAlign === 'right') {
+ this.cls += ' x-status-right';
+ }
+ this.callParent(arguments);
+ },
+
+ // private
+ afterRender : function(){
+ this.callParent(arguments);
+
+ var right = this.statusAlign === 'right';
+ this.currIconCls = this.iconCls || this.defaultIconCls;
+ this.statusEl = Ext.create('Ext.toolbar.TextItem', {
+ cls: 'x-status-text ' + (this.currIconCls || ''),
+ text: this.text || this.defaultText || ''
+ });
+
+ if (right) {
+ this.add('->');
+ this.add(this.statusEl);
+ } else {
+ this.insert(0, this.statusEl);
+ this.insert(1, '->');
+ }
+ this.height = 27;
+ this.doLayout();
+ },
+
+ /**
+ * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the
+ * status that was set after a specified interval.
+ * @param {Object/String} config 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:
+// Simple call to update the text
+statusBar.setStatus('New status');
+
+// Set the status and icon, auto-clearing with default options:
+statusBar.setStatus({
+ text: 'New status',
+ iconCls: 'x-status-custom',
+ clear: true
+});
+
+// Auto-clear with custom options:
+statusBar.setStatus({
+ text: 'New status',
+ iconCls: 'x-status-custom',
+ clear: {
+ wait: 8000,
+ anim: false,
+ useDefaults: false
+ }
+});
+
+ * @return {Ext.ux.StatusBar} this
+ */
+ setStatus : function(o) {
+ o = o || {};
+
+ if (Ext.isString(o)) {
+ o = {text:o};
+ }
+ if (o.text !== undefined) {
+ this.setText(o.text);
+ }
+ if (o.iconCls !== undefined) {
+ this.setIcon(o.iconCls);
+ }
+
+ if (o.clear) {
+ var c = o.clear,
+ wait = this.autoClear,
+ defaults = {useDefaults: true, anim: true};
+
+ if (Ext.isObject(c)) {
+ c = Ext.applyIf(c, defaults);
+ if (c.wait) {
+ wait = c.wait;
+ }
+ } else if (Ext.isNumber(c)) {
+ wait = c;
+ c = defaults;
+ } else if (Ext.isBoolean(c)) {
+ c = defaults;
+ }
+
+ c.threadId = this.activeThreadId;
+ Ext.defer(this.clearStatus, wait, this, [c]);
+ }
+ this.doLayout();
+ return this;
+ },
+
+ /**
+ * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
+ * @param {Object} config (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: