ExtJS labelWidth или задаем ширину пометок к полям формы

В ExtJS метка Label используется как аналог традиционному HTML элементу <label></label>, используемому для определения текстовых названий полей формы. Зачастую возникает необходимость дополнительно стилизовать эти метки, для этого в ExtJS используется параметр labelStyle, которому соответствует строка с CSS описанием. Естественно, таким образом можно задать цвет метки, изменить шрифт, ширину элемента и т.д:

{
  fieldLabel: 'Введите Ваше имя',
  name: 'userName',
  labelStyle: 'color: red; width: 200px; font-weight: bold;'
}

Однако, задав ширину метки в лоб через labelStyle, можно наткнуться на ряд неприятных и не всегда очевидных последствий, например, как показано на скриншоте ниже.

Проблема здесь заключается в том, что позиционированием элементов занимается ExtJS, если же вы меняете размер и расположение через CSS, вы начинаете сами отвечать за эти действия. Логичным выходом из сложившейся ситуации видится использование встроенных механизмов ExtJS для изменения размеров элементов - и это абсолютно верно.

Для изменения ширины меток Label необходимо использовать параметр слоя form, именуемый labelWidth. Да, именно слоя form, а не самого элемента формы field (например, TextField). Ширина всех меток на форме указывается в параметрах формы, как показано ниже:

myform = {
  labelWidth: 140,
  layout: 'form',
  style: 'padding: 15px;',
  defaults: {
    xtype: 'displayfield',
    labelStyle: 'color: #767782; font-weight: bold; width: 320px;'
  },
  items: [
    {
      fieldLabel: 'Ваше имя, сэр!',
      name: 'sirName'
    },
    {
      fieldLabel: 'Ваше пароль, милейший!',
      name: 'sirPassword'
    }
  ]
}

Таким образом мы получим корректное поведение ExtJS и корректное отображение меток формы.