Page 1 of 2 12 LastLast
Results 1 to 10 of 16

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

  1. #1
    Sencha User
    Join Date
    Dec 2009
    Posts
    79
    Answers
    2
    Vote Rating
    4
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Dec 2009
    Posts
    79
    Answers
    2
    Vote Rating
    4
      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 - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Answers
    501
    Vote Rating
    257
      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
    79
    Answers
    2
    Vote Rating
    4
      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
    574
    Answers
    59
    Vote Rating
    74
      0  

    Default

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

  8. #7
    Sencha User
    Join Date
    Dec 2009
    Posts
    79
    Answers
    2
    Vote Rating
    4
      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 - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Answers
    501
    Vote Rating
    257
      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
    79
    Answers
    2
    Vote Rating
    4
      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,790
    Answers
    583
    Vote Rating
    391
      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/

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •