/*! + * Ext JS Library 3.3.0 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** + * @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} 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.
+ *+ * @extends Ext.Toolbar + * @constructor + * Creates a new StatusBar + * @param {Object/Array} config A config object + */ +Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, { + /** + * @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: + *+new Ext.Panel({ + title: 'StatusBar', + // etc. + bbar: new 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 ++ */ + /** + * @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+// Create a left-aligned status bar containing a button, +// separator and text item that will be right-aligned (default): +new Ext.Panel({ + title: 'StatusBar', + // etc. + bbar: new 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: +new Ext.Panel({ + title: 'StatusBar', + // etc. + bbar: new Ext.ux.StatusBar({ + defaultText: 'Default status text', + id: 'status-id', + statusAlign: 'right', + items: [{ + text: 'A Button' + }, '-', 'Plain Text'] + }) +}); +{@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:+ */ + + /** + * @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+// 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 = new Ext.ux.StatusBar({ + defaultIconCls: 'x-status-custom' +}); + +// Changing the icon: +sb.setStatus({ + text: 'New status', + iconCls: 'x-status-custom' +}); +{@link #iconCls}applied when calling + *{@link #showBusy}(defaults to 'x-status-busy'). + * It can be overridden at any time by passing theiconCls+ * 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 thetext+ * 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'; + } + Ext.ux.StatusBar.superclass.initComponent.call(this); + }, + + // private + afterRender : function(){ + 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.currIconCls || ''), + text: this.text || this.defaultText || '' + }); + + if(right){ + this.add('->'); + this.add(this.statusEl); + }else{ + this.insert(0, this.statusEl); + this.insert(1, '->'); + } + 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
+ }
+});
+