Использование тега HR в формах

Для взаимодействия полей в ExtJs мы используем Ext.form.FieldSet или Ext.form.FieldContainer, но они не настолько легкие, как простой тег <hr>, который используется в качестве тематического элемента break в HTML. К сожалению, этот легкий компонент GUI отсутствует в ExtJS.

Эта реализация не будет работать с разметкой формы ввода. Для разметки формы ввода вы можете создать наследника Ext.form.field.Base и изменить шаблон рендеринга. Опасность, которая скрывается за использованием тега <hr> — это реализация форм с огромным количеством полей. Обычные же контейнеры помогают разделить форму на разделы(группы) и легко управлять ими.

Ext.define('app.ux.form.HorizontalRule', {
    extend: 'Ext.Component',
    alias: 'widget.hr',
    tpl: [
        '<hr class="hr-text" data-content="',
        '<tpl if="title">{title}</tpl>',
        '">'
    ],
    title: ' ', 

    initComponent: function() {
        if(this.title) {
            this.data = {
                'title': this.title
            };
        }
        this.callParent();
    }
});

.hr-text {
     line-height: 1em;
     position: relative;
     outline: 0;
     border: 0;
     text-align: center;
     height: 1.5em;
}
 .hr-text:before {
     content: '';
     background: linear-gradient(to right, transparent, #b5b8c8, transparent);
     position: absolute;
     left: 0;
     top: 50%;
     width: 100%;
     height: 1px;
}
 .hr-text:after {
     content: attr(data-content);
     position: relative;
     display: inline-block;
     color: black;
     padding: 0 .5em;
     line-height: 1.5em;
     color: #b5b8c8;
     background-color: #ffffff;
}

Fiddle:

a