Hybrid View

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Location
    Bogota, Colombia
    Posts
    33
    Vote Rating
    0
    xyrer is on a distinguished road

      0  

    Question Answered: toolbar in tabpanel

    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 - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    Answers
    93
    rdougan will become famous soon enough

      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
    xyrer is on a distinguished road

      0  

    Default


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

  5. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    Answers
    93
    rdougan will become famous soon enough

      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
    xyrer is on a distinguished road

      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 - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    Answers
    93
    rdougan will become famous soon enough

      0  

    Default




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

Thread Participants: 1

Tags for this Thread