javascript - Change view and remove element by Ext.Component.query

Question

I have a TabPanel like this:

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",
        }]
    }
]

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:

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

BUT I must use itemId and not id so I cannot use "Ext.getCmp" and i should use Ext.Component.query but I don't know how to manage remove and add operations

标签： javascriptextjsextjs6-modern

Answer 1

您必须首先获取组件的引用，然后将其删除。

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