Change xclass view extjs 6.2.1 modern

I have a tab panel like this

Ext.application({
    name : 'Fiddle',

    launch : function() {

    Ext.create('Ext.TabPanel', {
    items: [
        {
            title: 'First Tab',
            id: 'firstTab'
            xclass: 'viewClass'

        },
        {
            title: 'Second Tab',
            xclass: ''
        }
    ]});}});

in the xclass component there is the path of a class where is defined the view. In the view should be a button, after tap on it, the view should refresh and show another class, for example the view should be defined by 'viewClass2' and not anymore by 'viewClass' I'm imaging a function triggered on button tap like this:

function(): {
    Ext.getCmp('firstTab').xclass = 'viewClass2';
    this.getView().refresh() // but it doesen't exist
}

What can i do to change the view?

You can't dynamically change view type.

You can only remove the view and add other one.

Suppose view:

Ext.application({
    name : 'Fiddle',

    launch : function() {

        Ext.create('Ext.TabPanel', {
            id: 'tabId',
            items: [
                {
                    title: 'First Tab',
                    id: 'firstTab'
                    xclass: 'viewClass'
                }
            ]
        });
    }
});

And the function in some one button should be:

a = function() {
    Ext.getCmp('tabId').remove(Ext.getCmp('firstTab'));
    Ext.getCmp('tabId').add({'xclass':'viewClass2'})
}