1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
    kalya is on a distinguished road

      0  

    Default Unanswered: Refresh icon next to tab panel title

    Unanswered: Refresh icon next to tab panel title


    Hi guys!

    Is there a simple way to add refresh icon next to tab panel title (in tan panel header)? I want this icon to refresh entire data if this panel. Now i have tbar with this logic, but i need to transfer this button to tab panel
    header. It needs to be like this - 'Banner stats ' and refresh icon. Thanks for any help
    tbar.jpg
    Attached Images

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Do you mean something like this?

    On tabpanel render you do something like

    Code:
    tabPanel.tabBar.add({
                            xtype: 'button',
                            iconAlign: 'right',
                            text: 'refresh',
                            handler: function(b) {
                                //your refresh action
                            }
                        });

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
    kalya is on a distinguished road

      0  

    Default


    it is adding a new button after all tabs. But i need to have icons on each tab's header. so 6 tabs = 6 icons on each tab.

  4. #4
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,680
    Answers
    130
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    i would take a look on how the close-button for tabs is implemented and do it similar with your reload button. this behaviour is not baked into the framework.
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  5. #5
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Then you must do something like this. put the tabConfig on each panel you add to the tabpanel.

    Code:
    tabConfig: {
                                title: 'tabtitle',
                                listeners: {
                                    render: {
                                        fn: function(e) {
                                            e.el.createChild({
                                                tag: 'a',
                                                cls: 'refreshclass',
                                                href: '#',
                                                title: 'refresh'
                                            }).on('click', function(e) { alert('click'); });
                                            e.ownerCt.doLayout();
                                        }
                                    }
                                }
    
                            },
    refresh css, taken from close tabbtn

    Code:
    .refreshclass {
        background: url("urltorefreshicon.gif") no-repeat scroll 0 0 transparent;
        font-size: 0;
        height: 11px;
        line-height: 0;
        opacity: 0.6;
        position: absolute !important;
        right: 3px;
        text-indent: -999px;
        top: 3px;
        width: 11px;
    }

Thread Participants: 2