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

Question

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

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

Answer 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 中的不同位置，我看不出有什么办法可以实现这一点。我什至认为它根本不可行，但也许其他人可以教我如何以干净舒适的方式做到这一点 ;)

Answer 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
});

容器在两个面板上呈现。

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

Add 1 container in 2 Panels

containers

extjs

panel