/** * 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 * */Ext.define('Ext.ux.statusbar.StatusBar', { extend: 'Ext.toolbar.Toolbar', xtype: 'statusbar', alternateClassName: 'Ext.ux.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 #cfg-items} config, or added via * {@link #method-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.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.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. */ /** * @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. */ /** * @cfg {String} text * 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 {@link #defaultText} will be used. */ /** * @cfg [iconCls=''] * @inheritdoc Ext.panel.Header#cfg-iconCls * @localdoc **Note:** This CSS class will be **initially** set as the status bar * icon. See also {@link #defaultIconCls} and {@link #busyIconCls}. * * 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.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. */ cls: 'x-statusbar', /** * @cfg {String} busyIconCls * The default {@link #iconCls} applied when calling {@link #showBusy}. * 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}. * 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. * 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. 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, initComponent: function() { var right = this.statusAlign === 'right'; this.callParent(arguments); 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.cls += ' x-status-right'; this.add('->'); this.add(this.statusEl); } else { this.insert(0, this.statusEl); this.insert(1, '->'); } }, /** * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing * the status that was set after a specified interval. * * Example usage: * * // 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 * } * }); * * @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: * * @param {String} config.text The status text to display. If not specified, any current * status text will remain unchanged. * * @param {String} config.iconCls The CSS class used to customize the status icon (see * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged. * * @param {Boolean/Number/Object} config.clear 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 {@link #clearStatus}. If `true` is passed, the status will be * cleared using {@link #autoClear}, {@link #defaultText} and {@link #defaultIconCls} via * a fade out animation. If a numeric value is passed, it will be used as the callback interval * (in milliseconds), overriding the {@link #autoClear} 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: * * @param {Number} config.clear.wait The number of milliseconds to wait before clearing * (defaults to {@link #autoClear}). * @param {Boolean} config.clear.anim False to clear the status immediately once the callback * executes (defaults to true which fades the status out). * @param {Boolean} config.clear.useDefaults False to completely clear the status text * and iconCls (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}). * * @return {Ext.ux.statusbar.StatusBar} this */ setStatus: function(config) { var me = this, c, wait, defaults; config = config || {}; Ext.suspendLayouts(); if (Ext.isString(config)) { config = { text: config }; } if (config.text !== undefined) { me.setText(config.text); } if (config.iconCls !== undefined) { me.setIcon(config.iconCls); } if (config.clear) { c = config.clear; wait = me.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(me.clearStatus, wait, me, [c]); } Ext.resumeLayouts(true); return me; }, /** * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional * fade out animation. * * @param {Object} [config] 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: * @param {Boolean} config.anim True to clear the status by fading out the status element * (defaults to false which clears immediately). * @param {Boolean} config.useDefaults True to reset the text and icon using * {@link #defaultText} and {@link #defaultIconCls} (defaults to false which sets the text * to '' and removes any existing icon class). * * @return {Ext.ux.statusbar.StatusBar} this */ clearStatus: function(config) { var me = this, statusEl = me.statusEl, text, iconCls; config = config || {}; if (me.destroyed || config.threadId && config.threadId !== me.activeThreadId) { // this means the current call was made internally, but a newer // thread has set a message since this call was deferred. Since // we don't want to overwrite a newer message just ignore. return me; } text = config.useDefaults ? me.defaultText : me.emptyText; iconCls = config.useDefaults ? (me.defaultIconCls ? me.defaultIconCls : '') : ''; if (config.anim) { // animate the statusEl Ext.Element statusEl.el.puff({ remove: false, useDisplay: true, callback: function() { statusEl.el.show(); me.setStatus({ text: text, iconCls: iconCls }); } }); } else { me.setStatus({ text: text, iconCls: iconCls }); } return me; }, /** * Convenience method for setting the status text directly. For more flexible options see * {@link #setStatus}. * @param {String} text (optional) The text to set (defaults to '') * @return {Ext.ux.statusbar.StatusBar} this */ setText: function(text) { var me = this; me.activeThreadId++; me.text = text || ''; if (me.rendered) { me.statusEl.setText(me.text); } return me; }, /** * Returns the current status text. * @return {String} The status text */ getText: function() { return this.text; }, /** * Convenience method for setting the status icon directly. For more flexible options see * {@link #setStatus}. * See {@link #iconCls} for complete details about customizing the icon. * @param {String} cls (optional) The icon class to set (defaults to '', and any current * icon class is removed) * @return {Ext.ux.statusbar.StatusBar} this */ setIcon: function(cls) { var me = this; me.activeThreadId++; cls = cls || ''; if (me.rendered) { if (me.currIconCls) { me.statusEl.removeCls(me.currIconCls); me.currIconCls = null; } if (cls.length > 0) { me.statusEl.addCls(cls); me.currIconCls = cls; } } else { me.currIconCls = cls; } return me; }, /** * 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. * * @param {Object/String} config (optional) A config object in the same format supported by * {@link #setStatus}, or a string to use as the status text (in which case all other options * for setStatus will be defaulted). Use the `text` and/or `iconCls` properties on the config * to override the default {@link #busyText} and {@link #busyIconCls} settings. If the config * argument is not specified, {@link #busyText} and {@link #busyIconCls} will be used * in conjunction with all of the default options for {@link #setStatus}. * @return {Ext.ux.statusbar.StatusBar} this */ showBusy: function(config) { if (Ext.isString(config)) { config = { text: config }; } config = Ext.applyIf(config || {}, { text: this.busyText, iconCls: this.busyIconCls }); return this.setStatus(config); }});