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

Question

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

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 中标签元素的高度设置为 33px（2 行）。

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

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

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