javascript - ExtJs可替换项目

Question

我想创建这样的东西

Ext.onReady(function () {

    Ext.QuickTips.init();

    Ext.create('Ext.Viewport', {
        layout: 'fit',
        id: 'cmpWithReplacebleItems'
    });

    Ext.getCmp('cmpWithReplacebleItems').items = [new SomeComponent()];
});

SomeComponent的代码

SomeComponent = Ext.extend(Ext.Viewport, {
   layout: 'fit',
    items: [{
            xtype: 'panel',
            html: 'test',
            title: 'My Panel'
        }]
 });

如您所见，我希望“cmpWithReplacebleItems”项目可替换。但是当我尝试这段代码时，我在调整大小时遇到​​一些错误......

问题是..什么是正确的方法？

Answer 1

组件构建完成后，不能直接修改组件的内容。您想使用Ext.Container方法add , remove ，或removeAll修改项目。

Ext.onReady(function () {

    Ext.QuickTips.init();

    Ext.create('Ext.Viewport', {
        layout: 'fit',
        id: 'cmpWithReplacebleItems'
    });

    var cmp = Ext.getCmp('cmpWithReplacebleItems');
    cmp.add(new SomeComponent());
    cmp.doLayout(); //important to layout again after adding/removing
});