CODEWITHSUNDEEP
extjscontainerspanel
Sandy.Arv
Sandy.Arv

Reputation: 605

Add 1 container in 2 Panels

Is it possible to add one container in two different panels? I tried doing something like this

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

But it adds the container only in the second Panel

Here is a Fiddle

Upvotes: 1

Views: 96

Answers (2)

AswathyPrasad
AswathyPrasad

Reputation: 361

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

container is rendered on both panels.

Upvotes: 0

oberbics
oberbics

Reputation: 408

It depends a little bit on your use case. If you feel fine rendering the container two times you can just pass the config of the container to your panels:

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

For reusing the instance and placing the same instance two times on different positions in the dom i see no way of achieving that. I even think its not doable at all, but maybe someone else can teach me how to do it in a clean and cozy way ;)

Upvotes: 1

Related Questions