1. #1
    Sencha User
    Join Date
    Dec 2009
    Posts
    64
    Answers
    1
    Vote Rating
    1
    Werzi2001 is on a distinguished road

      0  

    Default Answered: [4.1.1a, TabPanel] Separate TabBar from Tabs

    Answered: [4.1.1a, TabPanel] Separate TabBar from Tabs


    Hi,

    is it possible to render the tabBar of a TabPanel to a completly different location than the Tabs itself? I would like to build a kind of task bar at the bottom of the page (= tabBar of TabPanel of the main content area).

    Thanks!

    Yours
    Werzi2001

  2. See if this works for you. You can remove a docked item (like tabBar and then either add it as a docked item somewhere else or whatever you choose. If you're adding the tabBar to the bottom of something you might start by defining the tabPanel using the tabPosition: 'bottom'.

    http://jsfiddle.net/slemmon/Hszjj/

    Code:
    var p = Ext.widget('panel', {
        renderTo: Ext.getBody()
        , height: 200
        , width: 300
        , bodyPadding: 7
        , html: 'Some random component'
    });
        
    
    
    Ext.widget('tabpanel', {
        renderTo: Ext.getBody()
        , height: 200
        , width: 300
        , margin: '10 0 0 0'
        , defaults: { bodyPadding: 7 }
        , items: [{
            title: 'first tab'
            , html: 'first tab body'
        }, {
            title: 'second tab'
            , html: 'second tab body'
        }]
        , listeners: {
            boxready: function (tp) {
                var tb = tp.getTabBar();
                tp.removeDocked(tb, false);
                p.addDocked(tb, 'top');
            }
        }
    });​

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Answers
    3504
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm not quite sure what you are saying but sounds like you shouldn't use a tab panel but a toolbar with a container using card layout.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Dec 2009
    Posts
    64
    Answers
    1
    Vote Rating
    1
    Werzi2001 is on a distinguished road

      0  

    Default


    But then i would have to implement the synchronization between the card layout and the toolbar by myself (adding/removing new panels, order of panels), wouldn't i?

    The TabPanel does already have all of this logic. The only thing i would have to do is separate the TabPar from the Panels.

  5. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,032
    Answers
    390
    Vote Rating
    185
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      1  

    Default


    See if this works for you. You can remove a docked item (like tabBar and then either add it as a docked item somewhere else or whatever you choose. If you're adding the tabBar to the bottom of something you might start by defining the tabPanel using the tabPosition: 'bottom'.

    http://jsfiddle.net/slemmon/Hszjj/

    Code:
    var p = Ext.widget('panel', {
        renderTo: Ext.getBody()
        , height: 200
        , width: 300
        , bodyPadding: 7
        , html: 'Some random component'
    });
        
    
    
    Ext.widget('tabpanel', {
        renderTo: Ext.getBody()
        , height: 200
        , width: 300
        , margin: '10 0 0 0'
        , defaults: { bodyPadding: 7 }
        , items: [{
            title: 'first tab'
            , html: 'first tab body'
        }, {
            title: 'second tab'
            , html: 'second tab body'
        }]
        , listeners: {
            boxready: function (tp) {
                var tb = tp.getTabBar();
                tp.removeDocked(tb, false);
                p.addDocked(tb, 'top');
            }
        }
    });​

  6. #5
    Sencha User
    Join Date
    Dec 2009
    Posts
    64
    Answers
    1
    Vote Rating
    1
    Werzi2001 is on a distinguished road

      0  

    Default


    Hi slemmon,

    thanks. That looks like the thing i wanted. I'll give it a try.

    Yours
    Werzi2001

    Edit:
    I tried it but it seems not to work within a viewport. I updated your example:
    http://jsfiddle.net/Hszjj/1/
    Do you know why i get a js error?

  7. #6
    Sencha User
    Join Date
    Sep 2011
    Posts
    568
    Answers
    58
    Vote Rating
    70
    ettavolt is just really nice ettavolt is just really nice ettavolt is just really nice ettavolt is just really nice

      0  

    Default


    That overnesting... Try this: http://jsfiddle.net/Hszjj/2/

  8. #7
    Sencha User
    Join Date
    Dec 2009
    Posts
    64
    Answers
    1
    Vote Rating
    1
    Werzi2001 is on a distinguished road

      0  

    Default


    Sorry didn't notice your reply until now.
    Yes you are right, that are far more components than needed for this example. But this is only a reduced example for the whole project and this nesting is needed by the complete project.

    But even if i reduce the nesting for this example i get the same error if i add the tabBar to the south-panel (i don't need it in a window ;-) ):
    http://jsfiddle.net/Hszjj/4/
    So the problems seems not to be the nesting but the south panel?

  9. #8
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,032
    Answers
    390
    Vote Rating
    185
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Use:
    Code:
    tabpanel.removeDocked(tabbar, false);
    The false will prevent the tabbar from being destroyed when removed.
    http://docs.sencha.com/ext-js/4-1/#!...d-removeDocked

  10. #9
    Sencha User
    Join Date
    Dec 2009
    Posts
    64
    Answers
    1
    Vote Rating
    1
    Werzi2001 is on a distinguished road

      0  

    Default


    Thanks a lot. That did it.

    Edit:
    I am sorry but i still doesn't work as intended:
    http://jsfiddle.net/Hszjj/6/
    If i add the tabbar to the viewport (after setting tabbar.region to south) it works. But it doesn't if i add the tabbar to another panel (in the example the south panel). The tabbar is added (html is there if you check using firebug) but not rendered correctly.

  11. #10
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The problem is the CSS top is still set.

    You should put a suitable layout on the south region. However, depending on what layout you choose it may not reset the top style (e.g. vbox would reset it, fit wouldn't). You could always remove the top style manually in the boxready listener:

    Code:
    tabbar.el.setTop(0);
    http://jsfiddle.net/hZUfD/