Label next to a field in ExtJS 4

Question

I have a file select field component and a label that I want it to appear next to each other (label to the right). They are both populated inside a function. Is not the label of the field, just a text I want it to warn about file size on the upload field. This is the code:

this.fileUploadField = Ext.widget('filefield',
{
  fieldLabel: 'Select a file:',
  name:'file',
  width: 200,
  buttonText: 'Button' });

  items.push(
  this.fileUploadField,
 {
    xtype: 'label',
    style: 'color:red',
    text: 'I'm the label that wants to appear on the right of the file upload field',
    name:'fileSizeLimit'
 }
);

Answer 1

I would put them into some container and than set layout as hbox. You can use for example

• fieldcontainer
• container
• fieldset

You can use anything where you can set the layout. You can use the flex config to position your fields correctly.

So the code could look something like this:

xtype: 'fieldset',
title: 'My Fields',
layout: {
    type: 'hbox',
    align: 'stretch'
},
items: [{
    xtype: 'filefield',
    flex: 3,
    fieldLabel: 'Select file:'
}, {
    xtype: 'label',
    style: 'color:red',
    flex: 2,
    name: 'fileSizeLimit',
    text: 'I\'m the label that wants to appear on the right of the file upload field'
}]

Check out this fiddle: https://fiddle.sencha.com/#fiddle/1ju5