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