Show an image inside an Ext.window.Window?

Question

This sounds incredibly simple, but I'm having issues displaying an image from a relative path in a popup window triggered by an onclick event from another component. Here's an example snippet:

var dialog = Ext.create(Ext.window.Window, {
    layout: 'vbox',
    maximizable: true,
    scrollable: true,
    id: 'dialog',
    title: 'Help',
    items: [
        {
            xtype: 'image',
            src: 'path/to/image/image1.png',
            margin: '10 10 10 10'
        },
        {
            xtype: 'image',
            src: 'path/to/image/image2.png',
            margin: '10 10 10 10'
        }
    ]
});
dialog.show();

So, my problem is that when I create and show the window for the first time, the images don't appear. Then, if I close it and reopen it, the images appear. I know that this is due to the browser requesting the images and showing them too fast. I've been tinkering and tinkering and can't find a good solution to show the images the right way the first time. Any advice is appreciated.

Answer 1

You need to set width and height parameters.

 var dialog = Ext.create(Ext.window.Window, {
            layout: 'vbox',
            maximizable: true,
            scrollable: true,
            id: 'dialog',
            width: 500,
            height: 600,
            title: 'Help',
            items: [{
                width: 300,
                height: 200,
                xtype: 'image',
                src: 'https://fiddle.sencha.com/classic/resources/images/sencha-logo.png',
                margin: '10 10 10 10'
            }, {
                width: 300,
                height: 200,
                xtype: 'image',
                src: 'https://fiddle.sencha.com/classic/resources/images/sencha-logo.png',
                margin: '10 10 10 10'
            }]
        });
        dialog.show();

Check example on https://fiddle.sencha.com/#view/editor&fiddle/33q1