Results 1 to 7 of 7

Thread: toolbar in tabpanel

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Location
    Bogota, Colombia
    Posts
    33
    Vote Rating
    0
      0  

    Question Answered: toolbar in tabpanel

    I tried to put a toolbar inside a tabpanel but there used to be a "dockedItems" property which is not longer valid, so if i put the toolbar in the "items" then it counts as another tab, I can't find any way to do what I want in the docs, anyone wanna point me in the right direction?

  2. The following code provides the expected result in PR2:

    Code:
    Ext.setup({
        onReady: function()  {
            Ext.Viewport.add({
                xtype: 'tabpanel',
                items: [
                    {
                        xtype: 'toolbar',
                        docked: 'top',
                        ui: 'light',
                        title: 'Tab Panel'
                    },
                    {
                        xtype: 'panel',
                        title: 'Hello',
                        html: 'First panel'
                    },
                    {
                        xtype: 'panel',
                        title: 'Two',
                        html: 'First panel'
                    }
                ]
            });
        }
    });

  3. #2
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Answers
    93
    Vote Rating
    7
      0  

    Default

    Code:
    items: [
        {
            xtype: 'toolbar',
            docked: 'top'
        }
    ]
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Location
    Bogota, Colombia
    Posts
    33
    Vote Rating
    0
      0  

    Default

    yeah, that's what I tried, and then the first tab in the tabpanel was a giant toolbar.

  5. #4
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Answers
    93
    Vote Rating
    7
      0  

    Default

    The following code provides the expected result in PR2:

    Code:
    Ext.setup({
        onReady: function()  {
            Ext.Viewport.add({
                xtype: 'tabpanel',
                items: [
                    {
                        xtype: 'toolbar',
                        docked: 'top',
                        ui: 'light',
                        title: 'Tab Panel'
                    },
                    {
                        xtype: 'panel',
                        title: 'Hello',
                        html: 'First panel'
                    },
                    {
                        xtype: 'panel',
                        title: 'Two',
                        html: 'First panel'
                    }
                ]
            });
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  6. #5
    Sencha User
    Join Date
    Dec 2011
    Location
    Bogota, Colombia
    Posts
    33
    Vote Rating
    0
      0  

    Default

    hm, that's what I did but with the tabBarPosition: 'bottom', I will rewrite it and check it out, thanks.

  7. #6
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Answers
    93
    Vote Rating
    7
      0  

    Default



    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  8. #7
    Sencha User
    Join Date
    Dec 2011
    Location
    Bogota, Colombia
    Posts
    33
    Vote Rating
    0
      0  

    Default

    it was the xtype property I was missing on the remaining items, without the toolbar they work fine, but with the toolbar, it needs to be defined on those too. Thanks.

Tags for this Thread

Posting Permissions

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