Измените xclass view extjs 6.2.1 на современный

Question

У меня есть такая панель вкладок

Ext.application({
    name : 'Fiddle',

    launch : function() {

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

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

в компоненте xclass есть путь к классу, где определяется представление. В представлении должна быть кнопка, после нажатия на нее представление должно обновиться и показать другой класс, например, представление должно быть определено в «viewClass2», а не в «viewClass». Я представляю себе функцию, запускаемую при нажатии кнопки, например:

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

Что я могу сделать, чтобы изменить вид?

Answer 1

Вы не можете динамически изменять тип представления.

Вы можете только удалить представление и добавить другое.

Предположим, представление:

Ext.application({
    name : 'Fiddle',

    launch : function() {

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

И функция в какой-то одной кнопке должна быть:

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