Planning and coding the message bar

To develop this extension, we can use the Ext JS toolbar and dock it to the bottom of the container. Then we can add a functionality where this toolbar can show the message text. Then we need to add a functionality when the message bar is called to show the message; the message bar appears and disappears when the close button is clicked upon or when the configured timer is completed. As per our functional requirement, we can see that the Ext JS library provided StatusBar extension is doing a lot that we needed to provide functionality for this message bar extension. So, we can modify that extension and add our own functionality and CSS styles to fulfill our requirement. Now let us start coding:

Ext.define('Examples.ux.MessageBar', {
  extend: 'Ext.toolbar.Toolbar',
  alias: 'widget.ux-msgbar',
  activeThreadId: 0,
  dock: 'bottom',
  config: {
    cls: 'x-messagebar',
    emptyText: '',
    defaultText: '',
    autoClear: 5000
  },


  initComponent: function...