Results 1 to 3 of 3

Thread: TabPanel with a button floated to the right

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    8

    Default Answered: TabPanel with a button floated to the right

    Hi there,

    I have a seemingly simple (in regular HTML/CSS) layout where I need to have a TabPanel which contains 3 Tabs, followed by a floating button to the right which persists across all tabs. So for example:

    Tab 1 | Tab 2 | Tab 3 | Space until the end of the page | Button
    ---------------------------------------------------------------
    [ Content of selected tab]

    Is there any example code that achieves this scenario? Should I be using the "layout" configuration somehow and elaborately place my button within a cell? Or do I need to use other trickery, such as absolute positioning and then custom CSS?

  2. Have a look at an example:
    Code:
    Ext.create('Ext.tab.Panel', {
        renderTo: Ext.getBody(),
        width   : 400,
        height  : 200,
        tabBar  : {
            items: [{
                xtype: 'tbfill'
            },{
                xtype: 'button',
                text: 'button'
            }]
        },
        items   : [{
            title: 'tab1'
        },{ 
            title: 'tab2'
        }]
    });
    Also have a look at my simple tabpanel plugin Its.tab.plugin.Tool that may suit your need.

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    Have a look at an example:
    Code:
    Ext.create('Ext.tab.Panel', {
        renderTo: Ext.getBody(),
        width   : 400,
        height  : 200,
        tabBar  : {
            items: [{
                xtype: 'tbfill'
            },{
                xtype: 'button',
                text: 'button'
            }]
        },
        items   : [{
            title: 'tab1'
        },{ 
            title: 'tab2'
        }]
    });
    Also have a look at my simple tabpanel plugin Its.tab.plugin.Tool that may suit your need.

  4. #3
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    8

    Default

    Thanks! That's pretty awesome. Is there any way to get rid of the styling that it automatically attaches (your plugin that is)?

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
  •