javascript - 分机JS : Image with dynamic height resizing container

Question

我有一个可供选择的图像列表，每个图像都有不同的尺寸。为了保持宽高比，我只设置图像的宽度，因此浏览器确定应该给出图像的高度。不幸的是，因为我没有高度，Ext JS 不确定要给容器多少高度，所以在渲染第一个图像后它不会更新它。

在下面的示例中，您将看到第一个图像正确渲染并设置了面板主体的高度。如果您在组合框中选择其他图像，它将不会设置高度，并且会被剪切掉。但是，如果您取消注释 bodyCls 属性，并重新运行该示例，它将按其应有的方式运行...图像选择会动态更改面板的高度。

这对我来说似乎有点老套，我不喜欢直接使用 float: left ，但我希望这些元素以 hbox 方式布局，所以我想知道是否有更好的方法来实现这一点。有人有更好的解决方案吗？

不，我不想使用object-fit或background-size: cover;

这是Fiddle和代码:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var f = Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            border: true,
            bodyStyle: 'border-color: blue !important;',
            height: 'auto',
            referenceHolder: true,
            // layout: {
            //     type: 'hbox',
            //     columns: 2
            // },
            // layout: 'fit',
            defaults: {
                style: 'float: left;'
            },
            // This style add height: 100% to the body
            // bodyCls: 'blah',
            margin: 5,
            bodyPadding: 5,
            viewModel: {
                stores: {
                    logosStore: {
                        autoLoad: true,
                        proxy: {
                            url: 'data1.json',
                            type: 'ajax'
                        }
                    }
                }
            },
            items: [{
                xtype: 'image',
                width: 200,
                reference: 'blah',
                hidden: true,
                bind: {
                    src: '{record.logoSrc}',
                    hidden: '{!record.logoSrc}'
                }
            }, {
                xtype: 'combobox',
                valueField: 'logoFileId',
                displayField: 'name',
                queryMode: 'local',
                forceSelection: true,
                margin: '0 0 0 40',
                value: 2,
                listConfig: {
                    itemTpl: '<img src="{logoSrc}" style="max-height: 40px;" />'
                },
                bind: {
                    store: '{logosStore}',
                    selection: '{record}'
                },
                listeners: {
                    select: function (combo, record) {
                        f.getViewModel().notify();
                        // f.setHeight(f.lookupReference('blah').getHeight());
                        // f.lookupReference('blah').getEl().dom.setAttribute('background-image', 'url("' + record.get('logoSrc') + '")');
                    }
                }
            }]
        })
    }
});

编辑 当我的组件与其他几个组件一起在另一个容器中使用时，我的解决方案开始崩溃。看这个Fiddle ，但如果您取消注释 MyForm 组件中的 cls 属性，它就可以工作......我必须向所有内容添加 height: 100% !important 似乎是错误的。就像也许有一个我可以使用的布局。

Answer 1

我确实想出了一个解决方案，那就是使用一点 JavaScript...我基本上等待图像加载，获取图像的当前高度，并更新其容器的 maxHeight，所以它可以将其高度报告回其父容器。一件奇怪的事情是，如果 maxHeight 低于某个阈值，我想将其保持在 150，如果阈值被击中两次或两次以上，当我执行 setMaxHeight(150) 时，它不会实际上并没有更新图像的高度。这就是为什么我在未达到阈值时首先 setMaxHeight(null) 的原因。一个例子是，当我首先选择第二个图像，然后选择第三个图像时...如果我不setMaxHeight(null)，第三个图像将被切断。

我认为这是一个可以接受的解决方案，但我再次想知道是否有一个布局可以为我做到这一点，或者我不理解某些布局或嵌套组件。

Fiddle和代码:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('MyForm', {
            extend: 'Ext.form.Panel',
            alias: 'widget.myForm',
            border: true,
            bodyStyle: 'border-color: blue !important;',
            referenceHolder: true,
            scrollable: true,
            layout: 'fit',
            margin: 5,
            bodyPadding: 5,
            tools: [{
                xtype: 'button'
            }],
            viewModel: {
                stores: {
                    logosStore: {
                        autoLoad: true,
                        proxy: {
                            url: 'data1.json',
                            type: 'ajax'
                        }
                    }
                }
            },
            items: [{
                xtype: 'container',
                reference: 'blah2',
                scrollable: true,
                height: 150,
                maxHeight: 150,
                layout: {
                    type: 'hbox'
                },
                items: [{
                    xtype: 'image',
                    width: 200,
                    reference: 'blah',
                    hidden: true,
                    bind: {
                        src: '{record.logoSrc}',
                        hidden: '{!record.logoSrc}'
                    },
                    listeners: {
                        el: {
                            load: function () {
                                f.getViewModel().notify();
                                var blah2 = f.lookupReference('blah2');
                                var height = f.lookupReference('blah').getHeight();
                                if (height < 150) {
                                    height = 150;
                                    blah2.setMaxHeight(null);
                                }
                                console.log(blah2.setMaxHeight(height), height);
                            }
                        }
                    }
                }, {
                    xtype: 'combobox',
                    valueField: 'logoFileId',
                    displayField: 'name',
                    queryMode: 'local',
                    forceSelection: true,
                    margin: '0 0 0 40',
                    value: 2,
                    width: 350,
                    listConfig: {
                        itemTpl: '<img src="{logoSrc}" style="max-height: 40px;" />'
                    },
                    bind: {
                        store: '{logosStore}',
                        selection: '{record}'
                    }
                }]
            }]
        });
        var f = Ext.create('MyForm', {
            renderTo: Ext.getBody()
        });
    }
});