Hybrid View

  1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    7
    Vote Rating
    0
    jfry is on a distinguished road

      0  

    Default Tabpanel title/badge text?

    Tabpanel title/badge text?


    Hi everyone, thanks in advance for any help you can give me on this. I'm pretty new to Sencha Touch/EXT and thusly am at a loss for how to solve this issue. I have a tabpanel that loads in content dynamically, I want to set one of the tabs to display the number of items in a list it contains either through title or badgetext. I cannot figure out how to modify either attribute though. Here's the code for the tabpanel:
    this.details = new DN.views.
    Code:
    NoticeDetails({
    			tpl: Ext.XTemplate.from('notice-detail')
    		});
    		
    		this.guestbook = new DN.views.GuestBook({
    			tpl: Ext.XTemplate.from('guestbook')
    		});
    		
    		this.tabs = new Ext.TabPanel({
    			cls:'single-notice-buttons',
    			items: [this.details,this.guestbook]
    		});
    The guesbook object is just a list and it's update gets called by the tabpanel. I can get it's total just fine, but I cannot update the tab panel. I've tried things like (from scope of the tabpanel):
    Code:
    Ext.getCmp('ext-comp-1046').items.getAt(1).setBadge('test');
    Code:
    this.tabs.items.items[1].tab.badgeText = "1";
    Code:
    this.tabs.items.items[1].title = "Test";
    No luck with any of those. It seems that after I create the tab panel I'm stuck with the title I used. Any suggestions anyone?

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi jfry.
    I post you a full example I realize to make you understand how to solve your problem.
    Take a look at the code below.

    Code:
    Ext.setup({
    
        onReady: function() {
            
            var viewport = new Ext.TabPanel({
                fullscreen: true,
                tabBar: {
                    dock: 'bottom',
                    layout: {
                        pack: 'center'
                    }
                },
                dockedItems: [{
                    xtype: 'toolbar',
                    title: 'Example',
                    items: [{
                        xtype: 'button',
                        ui: 'action',
                        text: 'Update Badge',
                        handler: function(){
                            viewport.tabBar.getComponent(1).setBadge('789');
                        }
                    }]
                }],
                items: [{
                    title: 'Details',
                    iconCls: 'info'
                },{
                    title: 'Guestbook',
                    iconCls: 'user'
                }]
            });
            
        }
    });
    Has you can see in my example I first take the TabPanel tabBar, then I get the tab numer 1 (first is 0) and then I call the "setBadge" function to update the badge text.

    So in your code you only need to call:

    Code:
    
    this.tabs.tabBar.getComponent(1).setBadge('Test');
    Hope this Helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  3. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    7
    Vote Rating
    0
    jfry is on a distinguished road

      0  

    Default


    That worked perfectly! I was missing the tabBar object I was missing out on. Thanks a million!

  4. #4
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by jfry View Post
    That worked perfectly! I was missing the tabBar object I was missing out on. Thanks a million!
    You are welcome
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  5. #5
    Sencha Premium Member
    Join Date
    Aug 2013
    Posts
    18
    Vote Rating
    1
    aysencha is on a distinguished road

      0  

    Default


    Please how can the same thing be done in Touch 2.x? I get the message 'setBadge' is undefined for the object.

Similar Threads

  1. Badge shows up over the wrong tab
    By irocker in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 29 Mar 2011, 10:23 AM
  2. SetBadge / TabPanel - badge text aligned right
    By KennethRusso in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 30 Dec 2010, 4:07 PM
  3. [FIXED-159] Tab badge text does not get cut off:
    By jay@moduscreate.com in forum Sencha Touch 1.x: Bugs
    Replies: 2
    Last Post: 28 Jul 2010, 1:03 PM
  4. How to set the tabtip of tabpanel when the title of tabpanel is changed?
    By liuzhisheng in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 6 Jul 2009, 4:33 PM

Thread Participants: 2

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