/*! - * Ext JS Library 3.3.1 - * Copyright(c) 2006-2010 Sencha Inc. - * licensing@sencha.com - * http://www.sencha.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
- }
-});
-