Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      Toolbar
        StatusBar

Class Ext.StatusBar

Package:Ext
Defined In:StatusBar.js
Class:StatusBar
Extends:Toolbar
*

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.

Note: Although StatusBar supports xtype:'statusbar', at this time Ext.Toolbar (the base class) does not support xtype. For this reason, if you are adding Toolbar items into the StatusBar you must declare it using the "new StatusBar()" syntax for the items to render correctly.

new Ext.Panel({
    title: 'StatusBar',
    // etc.
    bbar: new Ext.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
  allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
  cls : String
The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
StatusBar
  disabled : Boolean
Render this component disabled (default is false).
Component
  disabledClass : String
CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
  height : Number
The height of this component in pixels (defaults to auto).
BoxComponent
  hidden : Boolean
Render this component hidden (default is false).
Component
  pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
  pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
  text : String
A string that will be rendered into the status element as the status message (defaults to '');
StatusBar
  width : Number
The width of this component in pixels (defaults to auto).
BoxComponent
  x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
  y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
  disabled : Boolean
True if this component is disabled. Read-only.
Component
  hidden : Boolean
True if this component is hidden. Read-only.
Component
  initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
  items : Ext.util.MixedCollection
A MixedCollection of this Toolbar's items
Toolbar
  rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By

Public Events

Event Defined By