在 Ext.window.Window 中显示图像？

Question

这听起来非常简单，但我在显示来自另一个组件的 onclick 事件触发的弹出窗口中的相对路径的图像时遇到了问题。 这是一个示例片段：

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();

所以，我的问题是，当我第一次创建并显示窗口时，图像没有出现。 然后，如果我关闭它并重新打开它，就会出现图像。 我知道这是由于浏览器请求图像并显示它们太快所致。 我一直在修补和修补，但找不到一个好的解决方案来第一次以正确的方式显示图像。 任何建议表示赞赏。

Answer 1

您需要设置width和height参数。

 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();

检查https://fiddle.sencha.com/#view/editor&fiddle/33q1 上的示例