Insert new item to a panel from 'outside'...

[Jehu]

Why does this not work?

var cockpit = Ext.getCmp('cockpit'); // This is a Panel in a TabPanel
var sidebar = Ext.create('Ext.panel.Panel',{
    region: 'east',
    width: '200px',
    html: '<h1>TEST</h1>',
    collapsible: true
});
cockpit.add(sidebar);

I see the new Item in Firebug as second item in region 'east' (after 'center'), but it will not be rendered.

What am I doing wrong?

[vollchraZ]

Hi Jehu,

if your panel "cockpit" is already rendered, you have to call cockpit.doLayout() after adding.

[Jehu]

Thank you, but panel still does not appear.

var cockpit = Ext.getCmp('cockpit'); // This is a Panel in a TabPanel
var sidebar = Ext.create('Ext.panel.Panel',{
    region: 'east',
    width: '200px',
    html: '<h1>TEST</h1>',
    collapsible: true
});
cockpit.add(sidebar);
cockpit.doLayout(); // so?
Ext.getCmp('cockpit').doLayout(); // or so?

[vollchraZ]

Both. :-)

[Jehu]

So sorry,
i've startet now with a blank new html with ExtJS4 pre5 and do this:

var cockpit = Ext.create('Ext.panel.Panel',{
  id:'cockpit',
  layout:'border',
  title:'TEST',
  renderTo:Ext.getBody(),
  width:'600px',
  height:'300px',
  items: [{
    xtype: 'panel',
    id:'center',
    html: 'center',
    region: 'center'
  },{
    xtype: 'panel',
    id:'south',
    html: 'south',
    region: 'south'
  }]
});

var sidebar = Ext.create('Ext.panel.Panel',{
    region: 'east',
    width: '200px',
    html: 'east',
    id:'sidebar',
    collapsible: true
});

cockpit.add(sidebar);
Ext.getCmp('center').doLayout();
Ext.getCmp('cockpit').doLayout();
Ext.getCmp('sidebar').doLayout();

Sidebar won't come up.

[vollchraZ]

You're right.
The problem is in the Ext.layout.container.Border. It initializes the regions only once on creation.

onLayout: function() {
        var me = this;
        if (!me.borderLayoutInitialized) {
            me.initializeBorderLayout(); //this method renders the regions and sets borderLayoutInitialized to true
        }
        ...
}

Another option is that you can add your sidebar as a docked item to your center region.

var sidebar = Ext.create("Ext.panel.Panel", {
  dock: 'right',
  ...
});

Ext.getCmp('center').addDocked(sidebar);

greetings vollchraZ

[mitchellsimoens]

BorderLayout has never been able to add items after initialization. I'm not sure why it was designed this way but it has.

[Jehu]

Thank you all.
At the API Docs i've found the information too now (see "Notes")...
The hint there is to create a dummy panel inside and replace the content later. That's the way i go, because i need a collapsible panel, not a dock.