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个容器

2 个答案: