1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    0
    RuntimeException is on a distinguished road

      0  

    Default Unanswered: Ext.tab.Panel Tools Configuration

    Unanswered: Ext.tab.Panel Tools Configuration


    Greetings,

    Let me preface this post by stating that it is entirely possible that I am 'doing it wrong'.

    My goal is to create a tab panel with two tabs and display a help button to the right of the tabs (inline, in the same row). It should look something like this crude diagram.

    Code:
    //Goal
     ________ ________ __________________
    |  tab 1 |  tab 2 |______________[?]_|

    I would normally accomplish this via the tools property on the definition of the Ext.panel.Panel. This is my first time working with an Ext.tab.Panel and it appears to behave differently from a basic panel with regard to how the tools are rendered. They appear in a header, above the tabs, and I am not sure why.

    The 4.1 documentation states that the TabPanel will not display tools configured on the header.

    TabPanels use their header or footer element (depending on the tabPosition configuration) to accommodate the tab selector buttons. This means that a TabPanel will not display any configured title, and will not display any configured header tools.


    When I add a configuration for the tools property to the Ext.tab.Panel, a header appears where I would not expect one to be, which causes the rendered component to appear as below.

    Code:
    //Difference in rendering behavior
     ____________________________________
    |________ _______________________[?]_|
    |  tab 1 |  tab 2 |__________________|
     
    You can try this for yourself on any of the ExtJS 4.1 documentation pages by pasting the following into one of the code editor widgets and clicking on the Live Preview button.

    Code:
    Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 400,
        renderTo: document.body,
    
        tools : [{
            type : 'help',
            handler : function(event, toolEl, panel) {
                    alert('Should I be rendered up here?');
                }
        }],
        items: [{
            title: 'Tab 1'
        }, {
            title: 'Tab 2'
        }]
    });
    By specifying the tools configuration on the Ext.tab.Panel, am I specifying a header configuration on this component? Is this a bug in 4.x or, if not, is the documentation incorrect? Am I simply misunderstanding proper usage of this component and the inheritance model (container > abstractpanel > panel > tabpanel)?

    Does anyone know of a simple workaround to accomplish the stated goal?

    Thanks in advance!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You can add a button like this:

    Code:
    Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 400,
        renderTo: document.body,
        items: [{
            title: 'Foo'
        }, {
            title: 'Bar',
            tabConfig: {
                title: 'Custom Title',
                tooltip: 'A button tooltip'
            }
        }],
        
        listeners: {
            afterrender: function(panel){
                var bar = panel.tabBar;
                bar.insert(2,[
                    {
                        xtype: 'component',
                        flex: 1
                    },
                    {
                        xtype: 'button',
                        text: 'button'
                    }                
                ]);
            }
        }
    });‚Äč
    Scott.

  3. #3
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Have a look at my simple extension: Its.tab.plugin.Tool

Thread Participants: 2

Tags for this Thread