ExtJS 4 display picture in modal window

Question

In my application I use special key to call very simple window with only one element - image. This image is quite large so I set as a windows attributes: maxHeight: 700 and autoScroll: true. Image definition is the following:

initComponent: function () {
    var me = this;

    Ext.apply(me, {
        items: [
            {
                xtype:      'image',
                src:        'obr/picture.jpg',
                shrinkWrap: true,
                mode:       'image'
            }
        ],
        dockedItems: [
            {
                xtype: 'toolbar',
                    dock: 'bottom',
                    height: 40,
                    items: [
                        {
                            xtype:   'tbfill'
                        },
                        {
                            xtype:   'button',
                            handler: me.onClose,
                            margin:  '0 10 0 0',
                            text:    'Close'
                        }
                    ]
                }
            ]
    });
    this.callParent();
}

And when I click "Picture" button to call this window everytime I see the same (when application is "fresh", restarted). After first action I can see

(always) and when I press "Close" button and call it again I can see this window with picture in proper size. I can't find the reason, could you prompt me what's wrong?

I use ExtJS 4.2 and window definition is the following:

Ext.define('MyApp.view.Picture', {
    extend: 'Ext.window.Window',
    alias: 'widget.mywindow',

    requires: [
        'Ext.toolbar.Toolbar',
        'Ext.button.Button'
    ],

    resizable:  false,
    closable:   false,
    modal:      true,
    title:      'Nice picture...',
    maxHeight:  700,
    autoScroll: true,
...

Answer 1

You were very close but event "load" don't work. Answer is here:

http://www.appfoundation.com/2012/08/ext-js-dynamic-image-refresh-and-load/

listener shout be:

listeners : {
        afterrender :  function(me){
            me.el.on({
                    load: function (evt, ele, opts) {
                        me.doComponentLayout();
                    }
                });
           }
        }
}

Answer 2

On load event of an image use doLayout method of the window, as image take some time to load. Eg.:

{ xtype: 'image', src: 'obr/picture.jpg', shrinkWrap: true, mode: 'image', listeners: { load: function() { this.up('window').doLayout(); } } }

Hope this will help you :)