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:
Code:
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:
Code:
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!');
    }

});