Значок текстового поля Extjs внизу

Question

Можно ли поместить метку внизу текстового поля? Мне нужно, чтобы пользовательский интерфейс выглядел как PDF/печатная форма, где большинство меток полей центрированы ниже полей ввода.

Подход CSS/класс подходит. Я просто хочу это ускорить.

Заранее спасибо.

Answer 1

Добавить пользовательские CLS в свой TextField следующим образом:

Ext.create('Ext.Panel',{ 
     renderTo: Ext.getBody(), 
     width: 300, 
     height: 500, 
     items: [{ 
      xtype: 'textfield', 
      fieldLabel: 'First Name', 
      cls: 'pdfField', 
      labelSeparator: '' 
     }] 
    }); 

Затем создайте класс pdfField:

Для ExtJS (5) =>

div.pdfField .x-form-item-label { 
    display: table-footer-group; 
    text-align: center; 
} 

Для ExtJS (4) =>

.pdfField td { 
    display: table-caption; 
} 

.pdfField tr>td:first-child { 
    display: table-footer-group; 
    text-align: center; 
} 

Вот скрипка ta работает с обеими версиями: https://fiddle.sencha.com/#fiddle/h35

Не, чтобы ExtJS 5 выглядел лучше, потому что в ExtJS 5 используются divs для отображения содержимого текстового поля, в то время как ExtJS 4 использует ячейки таблицы.