ExtJS 6 基于宽高比设图片宽度及工具栏图片加载宽度异常求助

这种情况我之前也碰到过，本质是组件渲染时图片还没加载完成，ExtJS没法获取到图片的原始宽高比，所以只能把宽度设为0。下面给你几个实用的解决办法：

方法1：直接基于已知宽高比设置宽度 #

如果你的Logo尺寸是固定的（比如示例里的200x100，宽高比2:1），那可以直接手动计算宽度，不用依赖图片加载：

{
    xtype: 'box',
    autoEl: { tag: 'img', src: 'http://placehold.it/200x100' },
    height: 50,
    width: 100 // 50*2，对应原图的宽高比
}

优点是简单直接，没有加载延迟问题；缺点是如果后续Logo尺寸变化，需要同步修改这里的数值。

方法2：监听图片加载事件动态调整尺寸 #

给图片绑定load事件，等图片加载完成后，根据实际宽高比计算并设置组件宽度，同时触发组件重新布局：

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://placehold.it/200x100',
        onload: function() {
            // 获取图片的原始宽高比
            const ratio = this.width / this.height;
            // 获取组件实例
            const cmp = Ext.getCmp(this.parent.id);
            // 设置组件宽度
            cmp.setWidth(cmp.getHeight() * ratio);
            // 触发父容器重新布局
            cmp.up().doLayout();
        }
    },
    height: 50
}

这种方法更灵活，就算Logo尺寸变了也能自动适配，完美适配缓存或网络加载的场景。

方法3：使用Ext.Img组件替代box #

ExtJS专门提供了Ext.Img组件来处理图片，它内部已经封装了图片加载的逻辑，能自动维护宽高比：

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

Ext.Img会在图片加载完成后自动调整尺寸，完全避免了手动处理加载事件的麻烦，是最推荐的方案。

方法4：提前预加载图片 #

在组件渲染之前，先把图片加载到内存中，确保渲染时图片已经就绪：

// 提前加载图片
const logoImg = new Image();
logoImg.src = 'http://placehold.it/200x100';

// 等图片加载完成后再渲染组件
logoImg.onload = function() {
    Ext.create('Ext.toolbar.Toolbar', {
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'box',
            autoEl: { tag: 'img', src: logoImg.src },
            height: 50
        }]
    });
};

这种方法适合对渲染时机要求高的场景，但需要额外处理预加载逻辑。

内容的提问来源于stack exchange，提问作者Sergey Novikov