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

Ext JS：具有动态高度调整大小容器的图像

1 个答案: