javascript - 使用 ExtJS 单击按钮时更新区域

Question

抱歉我是新手，我虽然这很容易做到，但我认为我不了解 ExtJS 的基础知识:(。

我的目标:我有一个包含三个容器的页面。 中间的容器首先是空白的。 当您单击某个按钮时，我希望将中间的容器更改为另一个容器。

为此，我做到了: 第一个“空白”容器:

var centerregion = Ext.create('Ext.container.Container', { 
border: false,
collapsible: false,
xtype: 'container',
id: 'centerregion',
items: [
    {
    border: true,
    xtype: 'window',
    visible: true,
    }, 
]
});

当您点击时我希望显示的容器:

var consultation = Ext.create('Ext.container.Container', { 
border: false,
collapsible: false,
xtype: 'container',
id: 'consultation',
items: [
    {
    border: true,
    xtype: 'image',
    src: '/bundles/app/images/clouds.png',
    }, 
]
}); 

然后是按钮上的监听器:

listeners: {
click: function(){
    Ext.getCmp('centerregion').update('consultation');
}
},

当我点击时，它正在“工作”，中心区域发生变化，但新区域仅显示文本“咨询”。 显然，

 Ext.getCmp('centerregion').update('bob');

当 update() 正在等待 html 代码时，将显示一个显示文本“bob”的区域。

无论如何，我认为这不是更新区域的正确方法。 也许我应该只有一个容器，并更新它的内容而不是调用另一个容器？ 如果有人有任何提示:-)!

编辑:我的页面是这样构造的:

Ext.onReady(function() {
var mainscreen;
mainscreen = Ext.create('Ext.container.Viewport', {
    layout:'border',      
    items: [
        {
        layout: 'anchor',
        region: 'center',
        items: [
        maintopmenu,
        centerregion,
        ],
        },
        footer,
    ]
});

Answer 1

只需将组件添加到容器中，如下所示:

centerregion.add(consultation);

编辑:

var container = mainscreen.down('container');//the item without xtype in your case
container.remove(centerregion);
container.insert(1,consultation)