Ярлык рядом с полем в ExtJS 4

Question

У меня есть компонент поля выбора файла и метка, которую я хочу, чтобы она отображалась рядом друг с другом (метка справа). Они заселены внутри функции. Является не меткой поля, просто текст, который я хочу, чтобы он сообщал о размере файла в поле загрузки. Это код:

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

Я бы поставил их в какой-то container и чем установить layout как HBox. Вы можете использовать, например,

• fieldcontainer
• container
• fieldset

Вы можете использовать что-нибудь, где вы можете установить расположение. Вы можете использовать конфигурацию flex, чтобы правильно позиционировать поля.

Поэтому код может выглядеть примерно так:

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

Проверить эту скрипку: https://fiddle.sencha.com/#fiddle/1ju5