How to layout extjs fileuploadfield widget

Question

I am using the extjs fileuploadfield (xtype).

When I add this to my panel it looks very ordinary :

enter image description here

The text field should stretch out to the end of the 'File : ' label, and ideally I would want the browse button more to the right. This is how i use it :

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

Is there some way of making this component look reasonably OK ?

Guilherme Lopes Guilherme Lopes · Accepted Answer · 2014-10-30T16:18:34

Oliver,

When designing forms, Sencha had in mind that you would have many fields in your form, so all the labels have the same width to make a consistent look on your screen.

Your form looks weird because you only have one form field there. To adjust your width, just set your labelWidth to whatever is proper to your form (I believe 40 would be right for you), also, I don't think the setting flex works with the anchor layout, try replacing it with anchor: 100%. This should make your field looks better:

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

How to layout extjs fileuploadfield widget

1 Answers