Why does this panel not render?

[mice-pace]

Can anyone telling me why this component isn't rendering properly when i run this method? The goal is to replace the center part of a border layout with a new object, a container with 2 panels inside.

I'm pretty sure the code is finding each of the right sections, because I put a test method on only those components and they all report back, but when I try the replace I get an empty patch broken into two. My guess was the container is rendering but the inner components aren't, but since AfterRender and AfterLayout don't run when i do it, maybe it's the container.

Here's the code for the method I'm calling:

openJob: function(jobno) {         

jobPanel = Ext.create('MyApp.view.jobcontainer');
jobPanel.test();
//Build the new panel object we will be using


viewport = Ext.getCmp('mainwindow');
viewport.test();
centerRegion = viewport.getComponent(1);
centerRegion.test();
//Locate the region we wish to replace

centerRegion.removeAll();

/*jobPanel.add(Ext.create('MyApp.view.MyForm'));
jobPanel.add(Ext.create('MyApp.view.MyTabPanel'));
jobPanel.eachChild(function(child) { child.doLayout(); });*/
jobPanel.doLayout();

centerRegion.add(jobPanel);
centerRegion.doLayout();
//Replace the panel and refresh that region

alert("Done");
//Load the job details

}

And here's the code for the container i'm trying to add:

Ext.define('MyApp.view.jobcontainer', {
    extend: 'Ext.container.Container',
    alias: 'widget.newjob',

    requires: [
        'MyApp.view.MyForm',
        'MyApp.view.MyTabPanel'
    ],

    height: 250,
    width: 400,
    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'myform',
                    title: 'Job',
                    region: 'north'
                },
                {
                    xtype: 'mytabpanel',
                    region: 'center'
                }
            ],
            listeners: {
                afterlayout: {
                    fn: me.onContainerAfterLayout,
                    scope: me
                },
                afterrender: {
                    fn: me.onContainerAfterRender,
                    scope: me
                }
            }
        });

        me.callParent(arguments);
    },

    onContainerAfterLayout: function(abstractcontainer, layout, options) {
        alert("I am HERE!");
    },

    onContainerAfterRender: function(abstractcomponent, options) {
        alert("I am HERE!");
    },

    test: function() {
        alert('Jobcontainer, reporting!');
    }

});

[sword-it]

Hi,

you can try following code:

var view=Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'north',
        border: false,
        title:'North',
        margins: '0 0 5 0'
   		, items:[{
      		xtype:'button'
            , text:'getRegion'
            , handler:function(){
            	view.remove('panel');
                view.add(new Ext.container.Container({ 
                    region:'center',
                    layout:'hbox',
                    items:[
                    	{
                        	xtype:'panel'
                            , title:'panelOne'
                            , html:'Hi'
                            , height:100
                            , width:200
                        },
                        {
                        	xtype:'panel'
                            , title:'panelTwo'
                            , html:'Hello'
                            , height:150
                            , width:200
                        }
                    ]
                }));
                view.doLayout();
            }
        }]
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 150
    }, {
        region: 'south',
        title: 'South Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        split: true,
        width: 150
    }, {
        region:'center',
        id:'panel',
        title:'center'
    }]
});

[mice-pace]

Thanks Sword-IT, i think you were on the right track

The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added**. To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.panel.Panel) is added to the west region:

I think this may have been where i was going wrong. I was trying to directly replace a component and that wasn't allowed... so instead of making the panel i wanted to replace a direct member of the border layout, i put a container in the center region, and then replace the content of THAT instead of touching the content of the layout directly.

The AfterLayout method not triggering was what gave it away eventually... Turns out the divided section is empty and divided because i removedAll first, but then couldn't add (the section i was replacing happened to be divided the same way)