如何布局extjs fileuploadfield小部件

Question

我正在使用extjs fileuploadfield （xtype）。

当我将它添加到我的面板时，它看起来非常普通：

文本字段应该延伸到'File：'标签的末尾，理想情况下我希望浏览按钮更靠右边。这就是我使用它的方式：

               layout: {
                    type: 'anchor'
                },
                items: [
                    {
                        flex: 1,
                        xtype: 'label',

                        text: 'Upload',
                        style: 'font-weight: bold',
                        height: 22
                    },
                    {
                        flex: 1,
                        xtype: 'radio',
                        boxLabel: 'Client [Pfad / Dateiname]',
                        name: 'radioradio',
                        itemId:'RadioClientUploadWindow',
                        checked: 'true'
                    }, {
                        flex: 1,
                        xtype: 'fileuploadfield',
                        id: 'filedata',
                        emptyText: 'Select a document to upload...',
                        fieldLabel: 'File ',
                        buttonText: 'Browse '
                    },

有没有办法让这个组件看起来合理？

Answer 1

奥利弗，

在设计表单时，Sencha考虑到表单中会有很多字段，因此所有标签都有相同的宽度，以便在屏幕上显示一致的外观。

您的表单看起来很奇怪，因为那里只有一个表单字段。要调整宽度，只需将labelWidth设置为适合您表单的内容（我相信40适合您），此外，我也不认为flex设置适用于anchor布局，请尝试将其替换为anchor: 100%。 这应该让你的领域看起来更好：

{
    xtype: 'fileuploadfield',
    anchor: '100%',
    labelWidth: 40,
    id: 'filedata',
    emptyText: 'Select a document to upload...',
    fieldLabel: 'File ',
    buttonText: 'Browse '
}