Properties Methods Events Config Options Direct Link

# Class Ext.ux.StatusBar

Package: | Ext.ux
Defined In: | StatusBar.js
Class: | StatusBar
Extends: | Object

Basic status bar component that can be used as the bottom toolbar of any Ext.Panel. In addition to supporting the standard 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 showBusy method.

    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

## Config Options

Config Options | Defined By
--- | ---
| autoClear : Number The number of milliseconds to wait after setting the status via setStatus before automatically clearing the status te... The number of milliseconds to wait after setting the status via `setStatus` before automatically clearing the status text and icon (defaults to `5000`). Note that this only applies when passing the `clear` argument to `setStatus` since that is the only way to defer clearing the status. This can be overridden by specifying a different `wait` value in `setStatus`. Calls to `clearStatus` always clear the status bar immediately and ignore this value. | StatusBar
| autoClear : Number The number of milliseconds to wait after setting the status via setStatus before automatically clearing the status te... The number of milliseconds to wait after setting the status via `setStatus` before automatically clearing the status text and icon (defaults to `5000`). Note that this only applies when passing the `clear` argument to `setStatus` since that is the only way to defer clearing the status. This can be overridden by specifying a different `wait` value in `setStatus`. Calls to `clearStatus` always clear the status bar immediately and ignore this value. | StatusBar
| busyIconCls : String The default iconCls applied when calling showBusy (defaults to 'x-status-busy'). It can be overridden at any time by ... The default `iconCls` applied when calling `showBusy` (defaults to `'x-status-busy'`). It can be overridden at any time by passing the `iconCls` argument into `showBusy`. | StatusBar
| busyIconCls : String The default iconCls applied when calling showBusy (defaults to 'x-status-busy'). It can be overridden at any time by ... The default `iconCls` applied when calling `showBusy` (defaults to `'x-status-busy'`). It can be overridden at any time by passing the `iconCls` argument into `showBusy`. | StatusBar
| busyText : String The default text applied when calling showBusy (defaults to 'Loading...'). It can be overridden at any time by passin... The default `text` applied when calling `showBusy` (defaults to `'Loading...'`). It can be overridden at any time by passing the `text` argument into `showBusy`. | StatusBar
| busyText : String The default text applied when calling showBusy (defaults to 'Loading...'). It can be overridden at any time by passin... The default `text` applied when calling `showBusy` (defaults to `'Loading...'`). It can be overridden at any time by passing the `text` argument into `showBusy`. | StatusBar
| cls : String The base class applied to the containing element for this component on render (defaults to 'x-statusbar') | StatusBar
| cls : String The base class applied to the containing element for this component on render (defaults to 'x-statusbar') | StatusBar
| defaultIconCls : String The default iconCls value (see the iconCls docs for additional details about customizing the icon). This will be used... The default 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 ''). | StatusBar
| defaultIconCls : String The default iconCls value (see the iconCls docs for additional details about customizing the icon). This will be used... The default 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 ''). | StatusBar
| defaultText : String The default text value. This will be used anytime the status bar is cleared with the useDefaults:true option (defaul... The default text value. This will be used anytime the status bar is cleared with the `useDefaults:true` option (defaults to ''). | StatusBar
| defaultText : String The default text value. This will be used anytime the status bar is cleared with the useDefaults:true option (defaul... The default text value. This will be used anytime the status bar is cleared with the `useDefaults:true` option (defaults to ''). | StatusBar
| emptyText : String The text string to use if no text has been set. Defaults to '&nbsp;'). If there are no other items in the toolbar u... 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. | StatusBar
| emptyText : String The text string to use if no text has been set. Defaults to '&nbsp;'). If there are no other items in the toolbar u... 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. | StatusBar
| iconCls : String A CSS class that will be initially set as the status bar icon and is expected to provide a background image (defaults... 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 = new Ext.ux.StatusBar({
        defaultIconCls: 'x-status-custom'
    });

    // Changing the icon:
    sb.setStatus({
        text: 'New status',
        iconCls: 'x-status-custom'
    });
| StatusBar
| iconCls : String A CSS class that will be initially set as the status bar icon and is expected to provide a background image (defaults... 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 = new Ext.ux.StatusBar({
        defaultIconCls: 'x-status-custom'
    });

    // Changing the icon:
    sb.setStatus({
        text: 'New status',
        iconCls: 'x-status-custom'
    });
| StatusBar
| statusAlign : String The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered, it creates ... 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 items config, or added via 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):
    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']
        })
    });
| StatusBar
| statusAlign : String The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered, it creates ... 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 items config, or added via 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):
    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']
        })
    });
| StatusBar
| text : String A string that will be initially set as the status message. This string will be set as innerHTML (html tags are accep... 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 `defaultText` will be used. | StatusBar
| text : String A string that will be initially set as the status message. This string will be set as innerHTML (html tags are accep... 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 `defaultText` will be used. | StatusBar

## Public Properties

This class has no public properties.

## Public Methods

Method | Defined By
--- | ---
| StatusBar( `Object/Array config` ) Creates a new StatusBar Creates a new StatusBar Parameters: `config` : Object/Array A config object Returns: void | StatusBar
| clearStatus( [`Object config`] ) : Ext.ux.StatusBar Clears the status text and iconCls. Also supports clearing via an optional fade out animation. Clears the status text and iconCls. Also supports clearing via an optional fade out animation. Parameters: `config` : Object (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: `anim` {Boolean} : (optional) True to clear the status by fading out the status element (defaults to false which clears immediately). `useDefaults` {Boolean} : (optional) True to reset the text and icon using defaultText and defaultIconCls (defaults to false which sets the text to '' and removes any existing icon class). Returns: `Ext.ux.StatusBar` this | StatusBar
| getText() : String Returns the current status text. Returns the current status text. Parameters: None. Returns: `String` The status text | StatusBar
| setIcon( [`String iconCls`] ) : Ext.ux.StatusBar Convenience method for setting the status icon directly. For more flexible options see setStatus. See iconCls for co... Convenience method for setting the status icon directly. For more flexible options see setStatus. See iconCls for complete details about customizing the icon. Parameters: `iconCls` : String (optional) The icon class to set (defaults to '', and any current icon class is removed) Returns: `Ext.ux.StatusBar` this | StatusBar
- | setStatus( `Object/String config` ) : Ext.ux.StatusBar Sets the status text and/or iconCls. Also supports automatically clearing the status that was set after a specified i... Sets the status text and/or iconCls. Also supports automatically clearing the status that was set after a specified interval. Parameters: `config` : Object/String 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: `text` {String} : (optional) The status text to display. If not specified, any current status text will remain unchanged. `iconCls` {String} : (optional) The CSS class used to customize the status icon (see iconCls for details). If not specified, any current iconCls will remain unchanged. `clear` {Boolean/Number/Object} : (optional) 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 clearStatus. If `true` is passed, the status will be cleared using autoClear, defaultText and defaultIconCls via a fade out animation. If a numeric value is passed, it will be used as the callback interval (in milliseconds), overriding the 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: `wait` {Number} : (optional) The number of milliseconds to wait before clearing (defaults to autoClear). `anim` {Number} : (optional) False to clear the status immediately once the callback executes (defaults to true which fades the status out). `useDefaults` {Number} : (optional) False to completely clear the status text and iconCls (defaults to true which uses defaultText and defaultIconCls). 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
          }
      });
Returns: `Ext.ux.StatusBar` this | StatusBar
| setText( [`String text`] ) : Ext.ux.StatusBar Convenience method for setting the status text directly. For more flexible options see setStatus. Convenience method for setting the status text directly. For more flexible options see setStatus. Parameters: `text` : String (optional) The text to set (defaults to '') Returns: `Ext.ux.StatusBar` this | StatusBar
| showBusy( [`Object/String config`] ) : Ext.ux.StatusBar Convenience method for setting the status text and icon to special values that are pre-configured to indicate a "busy... 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. Parameters: `config` : Object/String (optional) A config object in the same format supported by 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 busyText and busyIconCls settings. If the config argument is not specified, busyText and busyIconCls will be used in conjunction with all of the default options for setStatus. Returns: `Ext.ux.StatusBar` this | StatusBar

## Public Events

This class has no public events.