Toolbar with title and subtitle

[bluehipy]

I was in need of a toolbar which would allow a title and a subtitle with some control on each ones text and style.

Title implementation:

Ext.define(    'MyApp.view.SplitTitle',
    {
        extend:'Ext.Component',
        xtype:'splittitle',
        config:{
            title:'',
            detail:'',
            titleClass:'',
            detailClass:'',
            baseCls:'x-splittitle',
            centered:true
        },
        updateTitle:function(newValue,oldValue)
        {
            this.titleEl.setHtml(newValue);
            return newValue;
        },
        updateDetail:function(newValue,oldValue)
        {
            this.detailEl.setHtml(newValue);
            return newValue;
        },
        updateTitleClass:function(newValue,oldValue)
        {
            if(oldValue)
            {
                this.titleEl.removeCls(oldValue);
            }
            this.titleEl.addCls(newValue);
            return newValue;
        },
        updateDetailClass:function(newValue,oldValue)
        {
            if(oldValue)
            {
                this.detailEl.removeCls(oldValue);
            }
            this.detailEl.addCls(newValue);
            return newValue;
        },
        getTemplate: function() {
            return [
                {
                    reference:'titleEl',
                    className: this.getTitleClass(),
                    tag:'span'
                },
                {
                    tag:'br' //ha ha :))
                },
                {
                    reference:'detailEl',
                    className: this.getDetailClass(),
                    tag:'span'
                }
            ];
        }
    }
);

Toolbar implementation:

Ext.define(
    'MyApp.view.DetailToolbar',
    {
        extend:'Ext.Toolbar',
        requires:['MyApp.view.SplitTitle'],
        xtype:'detailtoolbar',
        config:{
            splitTitle:true,
            title:'',
            detail:'',
            detailClass:'x-splittitle-detail',
            titleClass:'x-splittitle-title'
            
        },
        applyTitle: function(value) {
            this.getSplitTitle().setTitle(value);
        },
        applyDetail: function(value) {
            this.getSplitTitle().setDetail(value);
        },
        applyTitleClass: function(value) {
            this.getSplitTitle().setTitleClass(value);
        },
        applyDetailClass: function(value) {
            this.getSplitTitle().setDetailClass(value);
        },
        
        applySplitTitle:function(cfg)
        {
            return Ext.factory(cfg, MyApp.view.SplitTitle, this.getSplitTitle());
        },
        updateSplitTitle: function(newTitle, oldTitle) {
            if (newTitle) {
                this.add(newTitle);
                this.getLayout().setItemFlex(newTitle, 1);
            }
            
            if (oldTitle) {
                oldTitle.destroy();
            }
        }
    }
);

A test case : http://www.senchafiddle.com/#vJdBT


I am not really happy with the result, I guess the "br" can be skipped, with some better css adjustments.
I would be glad to hear some improvement ideas.

Thank you!

[intellix]

Great, I was going to create something like this. Would be nice to have it included in the framework as standard as I would have thought it was common practise to have subtext on a page.

For instance I have a registration page with different steps (cards) so would like:

Registration
Step 1/5

Registration
Step 2/5

etc