Изменить вид и удалить элемент с помощью Ext.Component.query

У меня есть TabPanel, как это:

Ext.application({
name : 'Fiddle',

launch : function() {

Ext.create('Ext.TabPanel', {
items: [
    {
        title: "",
        reference: 'tabpanel',
        itemId: 'tab1',
        items: [{
            itemId: 'firstTab',
            xclass: 'viewClass'
        }],
    }, {
        title: "",
        reference: 'tab2',
        layout: 'fit',
        items: [{
            xclass: "view",
        }]
    }
]

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

        Ext.getCmp('tab1').remove('firstTab');
        Ext.getCmp('tab1').add({
            itemId: 'firstTab',
            xclass: 'viewClass2'
        })

НО я должен использовать itemId, а не id, поэтому я не могу использовать "Ext.getCmp" и должен использовать Ext.Component.query, но я не знаю, как управлять операциями удаления и добавления


javascript extjs extjs6-modern
person Cristina Moretti    schedule 26.05.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны сначала получить ссылку на компонент, а затем удалить его.

Ext.create('Ext.TabPanel', {
id: 'myTabPanel',
items: [
    {
        title: "",
        reference: 'tabpanel',
        itemId: 'tab1',
        items: [{
            itemId: 'firstTab',
            xclass: 'viewClass'
        }],
    }, {
        title: "",
        reference: 'tab2',
        layout: 'fit',
        items: [{
            xclass: "view",
        }]
    }
];

var tabPanel = Ext.getCmp('myTabPanel');
var tab = tabPanel.getComponent("tab1");

// remove by id
tab.remove(tab.down("[itemId='firstTab']").id);
// remove by reference
tab.remove(tab.down("[itemId='firstTab']"));
person abeyaz    schedule 27.05.2019
comment
Я не могу получить itemId с помощью Ext.getCmp, поэтому Ext.getCmp('tab1') не работает - person Cristina Moretti; 27.05.2019
comment
Сорри, я неправильно увидел. Можете ли вы дать идентификатор самой вкладке? затем вы можете получить его с помощью getCmp и использовать метод «вниз», как я сделал для ссылки на него. Если вы не можете, установите его в переменную, где вы вызываете Ext.create, а затем вы можете использовать его таким же образом. - person abeyaz; 27.05.2019