extjs - Ext.getCmp('mainpage').add({items:stuff}); の逆の Sencha

Question

以下を使用して、ビューにコンテンツを追加しました。 Ext.getCmp('mainpage').add({items:thecarousel});

thecarouselは、カルーセルとそのコンテンツを表す配列です。これはすべて、必要に応じて機能します。そのコードは次のとおりです。

var thecarousel = { 
                   xtype: 'carousel',
                   width: '100%',
                   height: '100%',
                   itemId: 'thecarousel',
                   id: 'carousel',
                   defaults: {
                       styleHtmlContent:true,
                         },

                         items: allcharts, 
                        }

                Ext.getCmp('mainpage').add({items:thecarousel});
                Ext.Viewport.setMasked(false);// remove loading message`

私が探しているのは、これの逆を行い、ビューからカルーセルを削除する方法です。

次のことを試してみましたが失敗しました：

1. Ext.getCmp('mainpage').remove('carousel',false)
2. Ext.getCmp('mainpage').remove({items:'carousel'})
3. Ext.getCmp('mainpage').remove('carousel',true)

Answer 1

を使用している場合はid: 'carousel'、次のように実行できます。

Ext.getCmp('mainpage').remove(Ext.getCmp('carousel'))

コンポーネント クエリを使用して実行することもできます。

var main = Ext.getCmp('mainpanel');
main.remove(main.down('#carousel'));//added missing closing brackets
//OR, if there is only one component of xtype 'carousel' on your mainpanel:
main.remove(main.down('carousel'));

私は個人的に ID の使用を避け、2 番目の方法を使用します (必要に応じて、カルーセルをitemId: 'carousel'使用することもmain.remove(main.down('#carousel'))できます)。