Question

我在工具栏（应用程序菜单）上有一个图像（徽标）。我需要固定图像高度，宽度要基于宽高比，所以我只指定高度，如下所示：

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://placehold.it/200x100'
    },
    height: 50
}

问题是当图像下载（包括磁盘缓存）宽度计算为零时（当从内存缓存中立即加载图像时一切正常）。

此问题是否有解决方法？

据我所知，只要图像未加载，我就不知道它的宽高比，也无法正确计算宽度。我可以异步加载徽标并明确设置图像源，但它看起来像是一个糟糕的解决方案。

这是一个简单的fiddle来说明。

Answer 1

您可以使用updateLayout()方法。

<强> UpdateLayout请

更新此组件的布局。如果此更新影响此组件ownerCt，则将调用该组件的updateLayout方法来执行布局。否则，只有这个组件（及其子项）才会布局。

在 FIDDLE 中，我使用您的代码创建了一个演示，并使用updateLayout()方法进行了修改。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.toolbar.Toolbar', {
            items: [{
                xtype: 'box',
                autoEl: {
                    tag: 'img',
                    src: 'http://placehold.it/200x100',
                    height: 50
                },
                listeners: {
                    afterrender: function (cmp) {
                        cmp.el.on('load', function (e) {
                            console.log('width', e.target.width, 'height', e.target.height);
                            cmp.up('toolbar').updateLayout()
                        }, cmp)
                    }
                }
            }, {
                xtype: 'button',
                text: 'Button'
            }],
            renderTo: Ext.getBody()
        });
    }
});

ExtJS 6宽度基于上传图像的宽高比

1 个答案: