与文件上传器和顶部对齐的标签一起使用时，如何对齐底部的按钮？

Posted 2023-02-26

【中文标题】与文件上传器和顶部对齐的标签一起使用时，如何对齐底部的按钮？

【英文标题】：How to align button on bottom when used with file uploader and label aligned on top?

【发布时间】：2012-12-06 16:03:43

【问题描述】：

我正在使用文件字段进行文件上传，并且在其旁边放置了一个上传按钮。 放置长标签时，其布局中断，上传按钮位于顶部。 我希望我的标签与“顶部”对齐 如何使按钮底部对齐。

Ext.create('Ext.Container', 
                renderTo: Ext.getBody(),
                bodyPadding: 1,
                width: 400,
                height: 300,
                layout: 
                    type: 'hbox',
                    autoSize: true,
                    align: 'bottom'
                ,

                items: [
                    xtype: 'filefield',
                    labelSeparator: '',
                    fieldLabel: 'When placing long labels the layout is breaking and the upload button is placed at the top.',
                    labelAlign: 'top',
                    buttonText: 'Select',
                    flex: 1                        
                , 
                    xtype: 'button',
                    text: 'Upload',
                    width: 50
                    //,margin: '22 0 0 2'
                ]

            );

【参考方案1】：

从 html 标记中，我看到这个问题是由布局引起的。它将filefield 的顶部位置设置为259px，button 设置为278px。它假定标签只有一行。最简单的解决方法是将 css 中标签元素的高度设置为 33px（2 行）。

示例：http://jsfiddle.net/VphZH/1/

另一种可能性是扩展filefield 并为其添加另一个按钮。那么它应该更加独立于布局。

示例：http://jsfiddle.net/VphZH/3/

【讨论】：

当我尝试第二种方法时。我在这条线上遇到错误 me.callParent(arguments);错误是：'fileInputEl.dom' 为空或不是对象。 - 关于文件 ext-all.js 中的渲染函数

我无法重现此错误。我的示例正在运行，所以也许您对布局有一些问题？

能否请您对此代码发表评论。 if (Ext.isIE) me.uploadButton.getEl().repaint(); //它是干什么用的。我有一些 IE 渲染问题。隐藏面板时显示边框

这是改编自原始Ext.form.field.File.onRender 方法的代码，所以我不确定它的作用。可能它解决了 IE 上的一些问题，但我不知道究竟是什么:)