Extending Panel: How can I manipulate the layout regions?

[bdurette]

I'm trying to extend Ext.Panel, so I can specify the layout and (dynamically) the contents of the various layout regions. I have not figured out how or when the regions actually appear in the DOM so I can manipulate them. I'm using a border layout and in my simplified example I'm only using the 'south' and 'center' region and want to manipulate the 'center' region to add an image. Here's the code I have (full demo code in attachment):

Test.ImagePanel = Ext.extend( Ext.Panel, {
    layout: 'border',
    img: null,

    initComponent : function() {
        // Configure the layout for this panel
        Ext.apply(this, {
            layout: 'border',
            items: [{
                region: 'center',
                border: false,
                titlebar: false,
                deferredRender: false
            },
            new Ext.Slider({
                animate: false,
                width: 200,
                value: 50,
                minValue: 0,
                region: 'south',
                maxValue: 100
            })
        ]});

        // Invoke super-class initialization
        Test.ImagePanel.superclass.initComponent.call(this);
        
        this.imagePanel = this.items.itemAt(0);
    },

    afterRender: function(ct) {
        /* XXX This doesn't work because the imagePanel is not present in the DOM! */
        Ext.DomHelper.append(this.imagePanel.body.dom, {
            tag:'div',children:[{
                tag:'img',src:this.img
                }]
        });
        return;
    },

    ...

I guess I could make yet another panel extension for just holding the image and do the manipulation in the onRender or afterRender of that panel, but that seems like such a waste. Is there a better way?

Thanks,
Brandon