extjs - Sencha 与 Ext.getCmp('mainpage').add({items:stuff}); 相反

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 并使用第二种方法（如果你愿意，你可以给轮播一个itemId: 'carousel'并且仍然使用main.remove(main.down('#carousel'))）。