1. #1
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    612
    Vote Rating
    28
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default Toolbar with title and subtitle

    Toolbar with title and subtitle


    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:
    Code:
    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:
    Code:
    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!

  2. #2
    Sencha Premium Member intellix's Avatar
    Join Date
    Mar 2012
    Location
    UK + Malta
    Posts
    263
    Vote Rating
    18
    intellix will become famous soon enough

      0  

    Default


    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

Thread Participants: 1

Tags for this Thread