I have three (header, body, footer) Containers inside my ViewPort (vbox or fit layout) so that all three are visible at once.
None of these containers have any height, width set explicitly. My header is docked at top.

In the header container, I set this.html = "[<img> with valid src, but no height or width]", and nothing else. Just that.
When I check on the browser, this image doesn't show up the first time, but then after that, it shows up on following requests.
But if I specify image height in the <img> html, it shows up properly (first time too).

[NOTE: By First-time, I mean the first time that Image is "used" or "opened" in the browser. Basically, an image that the browser had never loaded/cached before]

On inspecting I found that during the first-time, Sencha computes the clientWidth/Height of this header = 0.
I figured this may be because it takes some time to load the image and cache it???

THAT's the main problem!!!

Now testing this is a bit tricky. You HAVE TO give a new image "src" everytime you want to the check the "first-time" load. So, if you want to test below code too, please change the image marked bold below everytime...
MyViewPort = Ext.extend(Ext.Panel,{
    fullscreen: true,
    layout: 'fit',
            dockedItems: [{
                xtype: 'container',
                dock: 'top',
                html: '<img src="[my_image.jpg]" alt="" />'
            items: [
                    xtype: 'container',
                    html: 'this is my page body'
                    xtype: 'container',
                    html: 'and the footer'
        MyViewPort.superclass.initComponent.apply(this, arguments);        
Please advice!

P.S.: :-) Please don't tell me why I can't live with adding the height/width attributes to the image. I CANT!!! Cuz I won't be the one adding that html in my app. It will be dynamic, and from an "end-user" .
Now we all know how stubborn (or sometimes stupid) end-users can be when we explain them these "limitations".