Question

我正在使用filefield进行文件上传，除了它之外我还放置了一个上传按钮。当放置长标签时，其下限正在中断，上传按钮位于顶部。我希望我的标签与“顶部＆＃39; 如何将按钮对齐底部。

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'
                }]

            });

Answer 1

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

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

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

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

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

1 个答案: