using widgets in panel headers in Ext Js 5

Hi,

I'm trying to migrate my app which uses ext js 4.1.1 to Ext Js 5.0.1.

Really appreciate the new features in Ext JS5.

My application is in MVC architecture and here is a gridpanel that I have defined in my app.

Code:

Ext.define('XX.view.AccountComboGrid', {
    extend : 'XX.view.BaseRemoteGrid',//BaseRemoteGrid extends Ext.grid.Panel
    alias : 'widget.accountcombogrid',
    frame : true,
    
    initComponent : function() {
        this.callParent();
        
var selectedAccount = parseInt(Ext.state.Manager.get(XX.User.id + 'selectedAccount'), 10);
        this.headers.add ({
            xtype : 'clearablecombo',//ux
            forceSelection : true,
            fieldLabel : this.accountIdComboLabel,
            name : 'accountId',
            store : Ext.getStore('Accounts'),
            valueField : 'id',
            displayField : 'title',
            value : (Ext.isNumber(selectedAccount) ? selectedAccount : undefined),
            listeners : {
                change : this.accountIdComboChange,
                scope : this
            }
        });
               this.columns : [....]
        }
});

the highlighted line of code -> this.headers.add({...}); works fine in 4.1.1 rendering a combobox in the grid panel header.

It throws an error in 5.0.1 since the this.header object is undefined.

How can I fix it?

Thanks

using widgets in panel headers in Ext Js 5