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

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

1 голос
/ 26 мая 2019

У меня есть 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, но я не знаю, как управлять операциями удаления и добавления

1 Ответ

0 голосов
/ 27 мая 2019

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

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']"));
...