在 2 个面板中添加 1 个容器答案

【问题标题】：Add 1 container in 2 Panels在 2 个面板中添加 1 个容器
【发布时间】：2017-05-04 10:05:47
【问题描述】：

是否可以在两个不同的面板中添加一个容器？我试着做这样的事情

var container =  Ext.create('Ext.container.Container', {
    //container content
});

var panel1 = Ext.create('Ext.form.Panel', {
    //panel1 content
    items : [container]
});

var panel2 = Ext.create('Ext.form.Panel', {
    //panel2 content
    items : [container]
});

但它只在第二个面板中添加容器

这是Fiddle

【问题讨论】：

这个小代码看起来是正确的。但是你能在小提琴上显示同样的东西吗，我可以在那里检查。
@Tejas1991：这是我正在尝试制作的程序的Fiddle。如您所见，容器仅添加到第二个面板
我刚刚调试了您的问题并修复了它，它会在几分钟内将其发布为答案。

标签： extjs containers panel

【解决方案1】：

这在一定程度上取决于您的用例。如果您觉得两次渲染容器感觉很好，您可以将容器的配置传递给您的面板：

var container = {
    //container content
    items: {
        xtype: 'displayfield',
        value: 'container content'
    }
};

var panel1 = Ext.create('Ext.form.Panel', {
    //panel1 content
    renderTo: Ext.getBody(),
    title: 'panel1',
    items: container
});

var panel2 = Ext.create('Ext.form.Panel', {
    //panel2 content
     renderTo: Ext.getBody(),
    title: 'panel2',
    items: container
});

为了重用实例并将同一个实例两次放置在 dom 中的不同位置，我认为没有办法实现这一点。我什至认为它根本不可行，但也许其他人可以教我如何以干净舒适的方式做到这一点；）

【讨论】：

【解决方案2】：

var container = {

    items: [{
        xtype: 'button',
        text : 'select',
         handler: function() {
            alert(this.up('form').getTitle()+ " clicked");
        }
    }]
};

var panel1 = Ext.create('Ext.form.Panel', {
    //panel1 content
    renderTo: Ext.getBody(),
    title: 'panel1',
    items: container
});

var panel2 = Ext.create('Ext.form.Panel', {
    //panel2 content
     renderTo: Ext.getBody(),
    title: 'panel2',
    items: container
});

容器在两个面板上呈现。

【讨论】：