1. #1
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Vote Rating
    26
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi