code: function() {
          var me = this;
          me.tbar = ['Search',{
                   xtype: 'textfield',
                   name: 'searchField',
                   hideLabel: true,
                   width: 200,
                   listeners: {
                       change: {
                           fn: me.onTextFieldChange,
                           scope: this,
                           buffer: 100
                       }
                   }
              }, {
                  xtype: 'button',
                  text: '&lt;',
                  tooltip: 'Find Previous Row',
                  handler: me.onPreviousClick,
                  scope: me
              },{
                  xtype: 'button',
                  text: '&gt;',
                  tooltip: 'Find Next Row',
                  handler: me.onNextClick,
                  scope: me
              }, '-', {
                  xtype: 'checkbox',
                  hideLabel: true,
                  margin: '0 0 0 4px',
                  handler: me.regExpToggle,
                  scope: me                
              }, 'Regular expression', {
                  xtype: 'checkbox',
                  hideLabel: true,
                  margin: '0 0 0 4px',
                  handler: me.caseSensitiveToggle,
                  scope: me
              }, 'Case sensitive'];
  
          me.bbar = Ext.create('Ext.ux.StatusBar', {
              defaultText: me.defaultStatusText,
              name: 'searchStatusBar'
          });
          
          me.callParent(arguments);
      }
docs: Component initialization override: adds the top and bottom toolbars and setup headers renderer.