To cooperate fields in ExtJs we are using ‘Ext.form.FieldSet‘ or ‘Ext.form.FieldContainer‘ but they are not so lightweight as a simple ‘<hr>’ tag which is used as an thematic break element in HTML. Unfortunately this lightweight GUI component is missing in ExtJS.

This implementation will not work with form layout. For form layout you can create pseudo field at the base of ‘Ext.form.field.Base‘ and change the rendering template.

The danger which lurks behind the usage of HR element is implementation of form classes with huge number of fields. Field containers allow us to split the form to subforms and manage them easily (divide et impera).

I would like to thank Scott Zirkel for css magic which I have used in the widget.

 

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();
    }
});

and the CSS:

.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;
}

And the sample: